suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum bricht das Klicken auf ein Kontrollkästchen die vorherige Auswahl in React ab?

<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>
P粉729198207P粉729198207458 Tage vor641

Antworte allen(1)Ich werde antworten

  • P粉662361740

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

    当你更新状态时,你是从原始数组而不是当前状态进行更新的。而不是从原始数组(checkboxList)进行映射,而是从状态的当前值(data)进行映射:

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

    Antwort
    0
  • StornierenAntwort