React中为什么点击一个复选框会取消之前的选择？
<p>我有多个复选框，当我点击一个复选框然后点击下一个时，前一个复选框会被取消选择，你知道为什么吗？</p>
<p>这是我的复选框组件：</p>
<pre class="brush:php;toolbar:false;">const Checkbox = ({ key, id, label, checked, name, onChange }:any) => {
return (
<div className="checkbox-wrapper">
<input multiple key={id} id={id} type="checkbox" checked={checked} name={name} onChange={onChange} />
<label htmlFor={id}>{label}</label>
</div>
)
}</pre>
<p>这是主要组件的样子，数据存在一个数组中，然后被映射出来，但我不确定为什么它会取消选择前一个复选框，我已经删除了很多其他无用的JSX代码：</p>
<pre class="brush:php;toolbar:false;">const checkboxList = [
{
id:0,
label:"大写",
name: "upper",
checked:false
},
{
id:1,
label:"小写",
name: "lower",
checked:false
},
{
id:2,
label:"数字",
name: "number",
checked:false
},
{
id:3,
label:"符号",
name: "symbols",
checked:false
}
]
const PasswordGenerator = () => {
const [data, setData] = useState(checkboxList)
const handleChange = (id:number) => {
const updateCheckboxes = checkboxList.map((checkbox) =>
checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox)
setData(updateCheckboxes)
}
return (
<div className="elements">
{data.map((obj) => {
return(
<div key={obj.id}>
<Checkbox
multiple={true}
id={obj.id}
label = {obj.label}
checked= {obj.checked}
name= {obj.name}
onChange = {() => handleChange(obj.id)}
/>
</div>
)
})}
</div>
)
}</pre>
<p><br /></p>
1
916
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
当你更新状态时，你是从原始数组而不是当前状态进行更新的。而不是从原始数组（checkboxList）进行映射，而是从状态的当前值（data）进行映射：
const handleChange = (id:number) => { const updateCheckboxes = data.map((checkbox) => checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox) setData(updateCheckboxes) }