在材质UI中选择两个项目后自动取消选择"first selected item"

Question

我是web开发的新手，我不知道如何完成这项任务。下面是问题说明。

给定三个复选框，如果选择box1和box2，它应该显示标记。现在，如果我选择box3，那么box1应该自动未选中，并且必须在UI中反映。

这是我正在尝试的代码示例。

export default function CheckboxesGroup() {
const classes = useStyles();
const [state, setState] = React.useState({
gilad: true,
jason: false,
antoine: false,
});
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.checked });
};
const { gilad, jason, antoine } = state;
const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
return (
<div className={classes.root}>
<FormControl required error={error} component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Pick two</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
label="Antoine Llorca"
/>
</FormGroup>
<FormHelperText>You can display an error</FormHelperText>
</FormControl>
</div>
);
}

或者你可以去https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/checkboxes/CheckboxesGroup.js

输出如下:https://y9q9rx--run.stackblitz.io

Answer 1

如果你只有3个选项，那么你可以为选中的项目设置特定的条件通过像这样更改handleChange函数

const handleChange = (event) => {
const {name, checked} = event.target;
let newState = {};
if([gilad, jason, antoine].filter((v) => v).length === 2 && checked === true){
if(name === 'gilad'){
newState = {jason: false};
} else if(name === 'jason'){
newState = {gilad: false};
} else if(name === 'antoine'){
newState = {gilad: false};
}
}
setState({ ...state,...newState, [name]: checked });
};

Answer 2

不确定我是否正确理解了你的问题，如果我误解了问题，请告诉我。据我所知，你试图强制用户最多选择2个框，进一步的选择将取消最早的选择。

对于这个问题，我们可以了解到选择的顺序很重要，但是您使用的数据结构并没有反映这一点。您现在正在使用

{
gilad: true,
jason: false,
antoine: false,
}

作为状态，其中不包含检查顺序的信息。在这种情况下，我建议使用数组，这样可以更容易地跟踪排序信息。

const [state, setState] = React.useState(['gilad']);
const handleChange = (event) => {
const { name, checked } = event.target;
// handles unchecking the checked box
if (!checked) {
setState(prev => prev.filter(n => n !== name));
} else {
const stateWithNewName = [...state, name];
// only take the latest two names
setState(stateWithNewName.slice(-2));
}
};
const error = state.length !== 2;

为Checkbox分量，

// notice the modification for the `checked` prop
<Checkbox checked={state.includes('gilad')} onChange={handleChange} name="gilad" />