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 }]);
    }
};