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

Question

我是 ReactJS 的初学者，我遇到了选择问题。我有一个 Select 用 MenuItem.

呈现一些名字

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

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

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

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

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

Answer 1

更新传递给 renderValue prop in <Select />

的值

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

Answer 2

正在检查

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

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

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

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

Answer 3

您可以使用 filter to create a new array from names that are present on names2. Then use useEffect 来设置您的 personName 状态。

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

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

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

How to leave values already checked inside the Select?

javascript

reactjs

react-material