Material React Select Multiple：单击选定元素时如何从数组中删除？

Question

我正在关注这个CodeSandBox示例，了解如何进行多种材料选择。

这是我的array ，具有所有可能的选项：

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>

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

我还需要做些什么才能获得与沙箱示例类似的结果？

Answer 1

我看到沙箱 Select 以字符串数组的形式获取数据，因此您可以简单地将 permissionsGroupList 映射为字符串数组，而不使用name属性。

 const Select = MaterialUI.Select; const Input = MaterialUI.Input; const Chip = MaterialUI.Chip; const MenuItem = MaterialUI.MenuItem; const Checkbox = MaterialUI.Checkbox; const ListItemText = MaterialUI.ListItemText; const permissionsGroupList = [ { name: 'Sellers' }, { name: 'Admins' }, ].map(p => p.name);//data in sandbox is NOT an array of objects const App = () => { const [ groupPermissions, setGroupPermissions, ] = React.useState([]); const handleChangeGroupPermissions = e => { setGroupPermissions(e.target.value); }; return ( <Select labelId="mult-check-permissions" id="demo-mutiple-checkbox" multiple label="Grupo de permissões" value={groupPermissions} input={<Input disableUnderline={true} />} onChange={handleChangeGroupPermissions} renderValue={selected => selected.map(val => <Chip key={val} label={val} />) } > {permissionsGroupList.map(permissionGroup => ( <MenuItem key={permissionGroup} value={permissionGroup} > <Checkbox checked={groupPermissions.includes( permissionGroup )} value={permissionGroup} /> <ListItemText primary={permissionGroup} /> </MenuItem> ))} </Select> ); }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@material-ui/core@4.9.7/umd/material-ui.production.min.js"></script> <div id="root"></div>

Answer 2

是的，您的解决方案只是将一个新项目添加到您的groupPermissions数组中。

你应该做什么：

• 检查该值是否已存在于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 }]);
    }
};