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