如何在 Select 中保留已选中的值？答案

【问题标题】：How to leave values already checked inside the Select?如何在 Select 中保留已选中的值？
【发布时间】：2020-11-29 21:48:50
【问题描述】：

我是 ReactJS 的初学者，但我遇到了 Selects 的问题。我有一个Select，它使用MenuItem 呈现一些名称。

我需要的是 Select 已经在名称列表中检查了一些名称。例如，名称Van Henry 和Ralph Hubbard 已包含在列表中。

为了知道应该标记列表中的哪一项，比较两个数组，如果其中一个中的值也在另一个中。所以我在列表中标记了那个名字。

我会展示一张图片，我想我可以这样更好地解释：

这是我在 CodeSandBox 中的代码：https://codesandbox.io/s/material-demo-4iksi?file=/index.js

有人可以帮助我吗？提前谢谢你。

【问题讨论】：

嘿@bertdida，你所做的对我来说非常有效。但是看到你的回答后，我发现我拉屎了。我的问题错了，我已经在 StackOverflow 上修复了它。一千次道歉

标签： javascript reactjs react-material

【解决方案1】：

您可以使用filter 从names 创建一个新的array，它存在于names2 上。然后使用useEffect 设置您的personName 状态。

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

React.useEffect(() => {
    setPersonName(names.filter((name) => names2.includes(name)));
}, []);

【讨论】：

这对我来说非常有用，谢谢 Bertidida！！！

【解决方案2】：

更新<Select />中传递给renderValue prop的值

<Select
  labelId="demo-mutiple-checkbox-label"
  id="demo-mutiple-checkbox"
  multiple
  value={personName}
  onChange={handleChange}
  input={<Input />}
  renderValue={(selected) => personName.join(", ")}
  MenuProps={MenuProps}
>

【讨论】：

抱歉 Codemax，我的问题是错误的，我已经在 StackOverflow 上修复了它。一千次道歉
不用担心

【解决方案3】：

personName 正在检查以查看是否应在此处检查值： <Checkbox checked={personName.indexOf(name) > -1} />

personName在这里被初始化为一个空数组：const [personName, setPersonName] = React.useState([]);

const [personName, setPersonName] = React.useState([...names2]); 将默认选择 names2 数组中的所有名称。

编辑：在使用更多信息编辑问题后进行编辑

【讨论】：

Srroy Dylance，我的问题弄错了，我已经在 StackOverflow 上修复了它。一千次道歉
谢谢 Dylance，您的回答有效，但目前，Bertdida 的解决方案对我来说效果更好。谢谢