javascript 如何在Select中保留已选中的值?

kfgdxczn  于 2023-06-04  发布在  Java
关注(0)|答案(3)|浏览(250)

我是ReactJS的初学者,我遇到了Selects的问题。我有一个Select,它用MenuItem渲染一些名称。
我需要的是Select已经在名称列表中检查了一些名称。例如,名称Van HenryRalph Hubbard已经包含在列表中。
为了知道列表中的哪一项应该被标记,比较两个数组,如果一个数组中的值也在另一个数组中。所以我把这个名字记在名单上。

我会展示一个图像,我想这样可以更好地解释:
下面是我在CodeSandBox上的代码:https://codesandbox.io/s/material-demo-4iksi?file=/index.js

有人能帮帮我吗先谢谢你。

bybem2ql

bybem2ql1#

您可以使用filternames2上存在的names创建新的array。然后使用useEffect设置您的personName状态。
filter()方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。

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

x8goxv8g

x8goxv8g2#

<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}
>
ctehm74n

ctehm74n3#

正在检查personName,以查看是否应在此处检查某个值:<Checkbox checked={personName.indexOf(name) > -1} />
personName在这里被初始化为一个空数组:const [personName, setPersonName] = React.useState([]);
const [personName, setPersonName] = React.useState([...names2]);将默认选择names2数组中的所有名称。
编辑:在问题被编辑后编辑了更多信息

相关问题