<p>Ich habe mehrere Kontrollkästchen und wenn ich auf ein Kontrollkästchen und dann auf das nächste klicke, wird das vorherige Kontrollkästchen deaktiviert. Wissen Sie, warum? </p> <p>Dies ist meine Checkbox-Komponente: </p> <pre class="brush:php;toolbar:false;">const Checkbox = ({ key, id, label, selected, name, onChange }:any) => zurückkehren ( <div className="checkbox-wrapper"> <input multiple key={id} id={id} type="checkbox" reviewed={checked} name={name} onChange={onChange} /> <label htmlFor={id}>{label}</label> </div> ) }</pre> <p>So sieht die Hauptkomponente aus, die Daten sind in einem Array vorhanden und werden dann zugeordnet, aber ich bin mir nicht sicher, warum das vorherige Kontrollkästchen deaktiviert wird. Ich habe viele andere nutzlose JSX-Codes entfernt: < /p> <pre class="brush:php;toolbar:false;">const checkboxList = [ { id:0, label:"Großbuchstaben", Name: „oben“, geprüft:falsch }, { ID:1, label:"Kleinbuchstaben", Name: „unten“, geprüft:falsch }, { ID:2, label:"Nummer", Name: „Nummer“, geprüft:falsch }, { id:3, label:"symbol", Name: „Symbole“, geprüft:falsch } ] const PasswordGenerator = () => const [data, setData] = useState(checkboxList) const handleChange = (id:number) => const updateCheckboxes = checkboxList.map((checkbox) => checkbox.id === id ? {...checkbox, geprüft: !checkbox.checked}:checkbox) setData(updateCheckboxes) } zurückkehren ( <div className="elements"> {data.map((obj) => { zurückkehren( <div key={obj.id}> <Kontrollkästchen multiple={true} id={obj.id} label = {obj.label} geprüft= {obj.checked} name= {obj.name} onChange = {() => handleChange(obj.id)} /> </div> ) })} </div> ) }</pre> <p><br /></p>

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

  setData(updateCheckboxes)
}