Rumah  >  Soal Jawab  >  teks badan

Mengapa mengklik kotak pilihan membatalkan pilihan sebelumnya dalam React?

<p>Saya mempunyai berbilang kotak pilihan dan apabila saya mengklik pada satu kotak pilihan dan seterusnya, kotak pilihan sebelumnya akan dinyahpilih, adakah anda tahu mengapa? </p> <p>Ini ialah komponen kotak semak saya: </p> <pre class="brush:php;toolbar:false;">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> ) }</pre> <p>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> <pre class="brush:php;toolbar:false;">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> ) }</pre> <p><br /></p>
P粉729198207P粉729198207457 hari yang lalu640

membalas semua(1)saya akan balas

  • P粉662361740

    P粉6623617402023-08-14 09:26:59

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

    balas
    0
  • Batalbalas