如何更改依赖于另一个复选框的复选框的状态

Question

我有两个复选框，如果其中一个被选中(true)，另一个应该被选中(false)。

代码:

export default function App() {
const [input, setInput] = useState({
Checked: {
Score: 1,
Selected: true
},
Unchecked: {
Score: 0,
Selected: false
}
});
const handleChecked = (e) => {
if (input.Unchecked.Selected) {
setInput({
...input,
Checked: {
...input.Checked,
Selected: false
}
});
} else {
setInput({
...input,
Checked: {
...input.Checked,
Selected: e.target.checked
}
});
}
};
const handleUnchecked = (e) => {
if (input.Checked.Selected) {
setInput({
...input,
Unchecked: {
...input.Unchecked,
Selected: false
}
});
} else {
setInput({
...input,
Unchecked: {
...input.Unchecked,
Selected: e.target.checked
}
});
}
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Space>
<Checkbox
checked={input.Checked.Selected}
onChange={(e) => handleChecked}
>
Checked
</Checkbox>
<Checkbox
checked={input.Unchecked.Selected}
onChange={(e) => handleUnchecked}
>
Unchecked
</Checkbox>
</Space>
</div>
);
}

Codesandbox链接:https://codesandbox.io/s/patient-pond-zx3vug?file=/src/App.js

代码不会改变onclick的状态。如果假设第一个复选框(Checked)为真，那么第二个复选框应该为假。在这种情况下，用户单击第二个复选框，第二个复选框应该为真，并使第一个复选框为假。(也就是说，不可能两个复选框都为真。但是这两个复选框都可以为假。

Answer 1

您不需要两个函数来处理相同的内容。你可以在点击的时候切换这个值。在这里检查

你的代码问题:你没有调用函数

onChange={handleChecked}

更好的解决方案:

export default function App() {
const [input, setInput] = useState({
Checked: {
Score: 1,
Selected: true
},
Unchecked: {
Score: 0,
Selected: false
}
});
const handleChecked = (e) => {
setInput((input) => ({
...input,
Checked: {
...input.Checked,
Selected: !input.Checked.Selected
},
Unchecked: {
...input.Unchecked,
Selected: !input.Unchecked.Selected
}
}));
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Space>
<Checkbox checked={input.Checked.Selected} onChange={handleChecked}>
Checked
</Checkbox>
<Checkbox checked={input.Unchecked.Selected} onChange={handleChecked}>
Unchecked
</Checkbox>
</Space>
</div>
);
}

Answer 2

定义复选框状态的方式可以简化。对于2个复选框，这可能是可以的，但是如果你需要从json数组构建复选框，那么你会遇到问题。

所以我将像这样定义状态，对象数组包含关于每个复选框控件的所有元数据。

const [input, setInput] = useState([
{ name: "chkbox1", Score: 1, Selected: true },
{ name: "chkbox2", Score: 0, Selected: false }
]);

所以在jsx中，你必须采取相应的改变，目前对于你的例子，它是这样的，然而，这可能是在.map函数作为可迭代的控件。

<Checkbox
name="chkbox1"
checked={input[0].Selected}
onChange={handleChecked}
>
Checked
</Checkbox>
<Checkbox
name="chkbox2"
checked={input[1].Selected}
onChange={handleChecked}
>
Unchecked
</Checkbox> 

最后在handleChecked事件中，您可以找到未选中的其他复选框并相应地切换它。即使没有名称，也可以这样做，但只需传递index。

const handleChecked = (e) => {    
let temp = [...input];
let otherCheckboxIndex = temp.findIndex((obj => obj.name !== e.target.name));
let thisCheckboxIndex = temp.findIndex((obj => obj.name === e.target.name));       
temp[otherCheckboxIndex].Selected = !e.target.checked;
temp[thisCheckboxIndex].Selected = e.target.checked;
setInput(temp);
};

查看此处codesandbox.