React中为什么点击一个复选框会取消之前的选择？

Question

我有多个复选框，当我点击一个复选框然后点击下一个时，前一个复选框会被取消选择，你知道为什么吗？

这是我的复选框组件：

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

这是主要组件的样子，数据存在一个数组中，然后被映射出来，但我不确定为什么它会取消选择前一个复选框，我已经删除了很多其他无用的JSX代码：

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

Answer 1

当你更新状态时，你是从原始数组而不是当前状态进行更新的。而不是从原始数组（checkboxList）进行映射，而是从状态的当前值（data）进行映射：

const handleChange = (id:number) => {
  const updateCheckboxes = data.map((checkbox) => 
    checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox)

  setData(updateCheckboxes)
}