Javascript 材质反应选择多个：单击选定元素时如何从数组中删除？

下面这个例子说明了如何进行多重材质选择

这是我的

阵列

，具有所有可能的选项：

const permissionsGroupList = [
    { name: 'Sellers' },
    { name: 'Admins' }
];

这是具有所选选项的我的状态：

const [groupPermissions, setGroupPermissions] = useState([]);

添加所选选项的我的函数：

const handleChangeGroupPermissions = event => {
    setGroupPermissions(event.target.value);
};

我的模板组件：

<InputLabel id="mult-check-permissions">Grupo de permissões</InputLabel>
  <Select
    labelId="mult-check-permissions"
    id="demo-mutiple-checkbox"
    multiple
    label="Grupo de permissões"
    onChange={handleChangeGroupPermissions}
    value={groupPermissions}
    input={<Input disableUnderline={true} />}
    renderValue={selected =>
      selected.map(value => <Chip key={value.id} label={value.name} />)
    }
  >
    {permissionsGroupList.map(permissionGroup => (
      <MenuItem
        key={permissionGroup.name}
        value={{ name: permissionGroup.name }}
      >
        <Checkbox
          checked={groupPermissions.some(
            group => group.name === permissionGroup.name
          )}
        />
        <ListItemText primary={permissionGroup.name} />
      </MenuItem>
    ))}
  </Select>

Grupo de permissões
已选择。映射（值=>）
}
>
{permissionsGroupList.map（permissionGroup=>(
group.name==permissionGroup.name
)}
/>
))}

在本例中，当我选择一个已选择的选项时，该元素将从数组

groupPermissions

中删除。在我的例子中，当我在一个已经选择的选项中单击时，这个元素将再次放入数组中

---

要获得沙盒示例的类似结果，我还需要做更多的工作。

我看到沙盒选择将数据作为字符串数组获取，因此您可以简单地将permissionsGroupList映射为字符串数组，而不使用

name

属性

const Select=MaterialUI.Select；
常量输入=物料输入；
常数芯片=材料芯片；
const MenuItem=MaterialUI.MenuItem；
常量复选框=材料复选框；
常量ListItemText=MaterialUI.ListItemText；
常量权限组列表=[
{名称：'卖方'}，
{name:'Admins'}，
].map（p=>p.name）//沙盒中的数据不是对象数组
常量应用=（）=>{
常数[
组权限，
setGroupPermissions，
]=React.useState（[]）；
const handleChangeGroupPermissions=e=>{
setGroupPermissions（例如target.value）；
};
返回(
已选择。映射（val=>）
}
>
{permissionsGroupList.map（permissionGroup=>(
))}
);
};
ReactDOM.render（，document.getElementById（'root'））
是的，您的解决方案只是将一个新项目添加到您的
组权限
数组中

你应该做什么：


检查该值是否已存在于
groupPermissions
如果没有，请添加它
如果是，请将其移除

因此，您的句柄选项应该类似于：

const handleChangeGroupPermissions = event => {
    const { value } = event.target;

    if (groupsPermissions.includes(value) {
        // deep clone from your object array
        const newGroupsPermissions = JSON.parse(JSON.stringify(groupPermissions ));
        newGroupsPermissions = newGroupsPermissions.filter(item => {
            return item.name !== value;
        });
        setGroupPermissions(newGroupsPermissions);
    } else {
        setGroupPermissions([...groupsPermissions, { name: value }]);
    }
};

我需要在选择中使用此功能，当单击标签（或复选框）复选框并将值放入array@veroneseWithS更新了答案，在sanbox中，select
value={personName}
获取字符串数组，我将permissionsGroupList更改为字符串数组，并更改了使用name属性的代码。No，比那简单多了。OP将错误的数据类型传递给Select的值