Mengapa mengklik kotak pilihan membatalkan pilihan sebelumnya dalam React?

Question

Saya mempunyai berbilang kotak pilihan dan apabila saya mengklik pada satu kotak pilihan dan seterusnya, kotak pilihan sebelumnya akan dinyahpilih, adakah anda tahu mengapa?

Ini ialah komponen kotak semak saya:

const Kotak Semak = ({ kunci, id, label, ditandai, nama, onChange }:mana-mana) =>

  kembali (
    <div className="checkbox-wrapper">
      <masukkan kunci berbilang={id} id={id} type="checkbox" checked={checked} name={name} onChange={onChange} />
      <label htmlFor={id}>{label}</label>
    </div>
  )
}

Beginilah rupa komponen utama, data hadir dalam tatasusunan dan kemudian dipetakan, tetapi saya tidak pasti mengapa ia menyahpilih kotak semak sebelumnya, saya telah mengalih keluar banyak kod JSX lain yang tidak berguna: < /p>

const checkboxSenarai = [

  {
    id:0,
    label:"huruf besar",
    nama: "atas",
    diperiksa:false

  },
  {
    id:1,
    label:"huruf kecil",
    nama: "lebih rendah",
    diperiksa:false

  },
  {
    id:2,
    label: "nombor",
    nama: "nombor",
    diperiksa:false

  },
  {
    id:3,
    label: "simbol",
    nama: "simbol",
    diperiksa:false

  }
]

const PasswordGenerator = () =>


const [data, setData] = useState(Senarai kotak semak)

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

    setData(kemas kiniKotakSemak)

  }


  kembali (
    
      <div className="elemen">
        {data.map((obj) => {

          kembali(
            <kunci div={obj.id}>
          <Kotak semak
          berbilang={benar}
          id={obj.id}
          label = {obj.label}
          checked= {obj.checked}
          nama= {obj.name}
          onChange = {() => handleChange(obj.id)}
          />
        </div>

          )
        })}
        </div>
  )
}

Answer 1

Apabila anda mengemas kini keadaan, anda mengemas kini daripada tatasusunan asal, bukan keadaan semasa. Daripada memetakan daripada tatasusunan asal (Senarai kotak semak), peta daripada nilai semasa keadaan (data):

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

  setData(updateCheckboxes)
}