Aktualisiere Zustand dynamisch mit Reagieren mit Checkboxen

Question

Ich habe eine Checkbox namens Animal. Wenn das Kontrollkästchen aktiviert ist, wird this.state.Animal auf true gesetzt und das Tierfilter-Div wird angezeigt.

<input type="checkbox" checked={this.state.Animal} onChange={this.checkAnimal} /> Animals 
{this.state.Animal ? 
<div className="animal-filter"> 
<div className="checkbox"> 
    <p><input type="checkbox" checked={this.state.dog} onChange={this.checkdog} /> AA </p> 
    </div> 
    <div className="checkbox"> 
    <p><input type="checkbox" checked={this.state.cat} onChange={this.checkcat} /> A</p> 
    </div> 
    <div className="checkbox"> 
    <p><input type="checkbox" checked={this.state.fish} onChange={this.checkfish} /> B</p> 
    </div> 
</div> : null} 

Mein Problem ist, dass ich diese Kontrollkästchen von Katze, Hund und Fisch will sofort auf true gesetzt werden, sobald das Tier Zustand auf true gesetzt ist. Ich weiß, dass react setState den Status nicht automatisch aktualisiert, also wie würde ich es so machen, dass, wenn das Tier-Kontrollkästchen "aktiviert" ist, die anderen Kontrollkästchen auf "true" (umgekehrt) gesetzt sind?

Mein Code für die Aktualisierung Zustand:

checkAnimal(){ 
    this.setState({animal: !this.state.animal}); 
    if (this.state.animal !=true){ 
    this.setState({ 
     cat:false, 
     dog:false, 
     fish:false, 
    }); 
    }else{ 
    this.setState({ 
     cat:true, 
     dog:true, 
     fish:true, 
    });  
    } 
} 

Answer 1

Die checkAnimal Methode kann drastisch

checkAnimal() { 
    this.setState({ 
    animal: !this.state.animal, 
    cat: !this.state.animal, 
    dog: !this.state.animal, 
    fish: !this.state.animal, 
    }); 
} 

Dies zu

vereinfacht werden garantieren, dass, wenn das Tier Kontrollkästchen aktiviert ist, die Katze, Hund und Fisch Kontrollkästchen wird mit seinem Zustand synchron bleiben.

Auch gibt es Hinweise auf this.state.Animal mit einem Kapital A im jsx, die mit this.state.animal unvereinbar ist, wie es in der checkAnimal Methode zugegriffen wird.

z.B. {this.state.Animal ? also pass auf.

Verwenden Sie einen JavaScript-Code linter wie eslint, um Fehler wie diese zu fangen.