チェックボックスを使用して状態を動的に更新する

Question

私はAnimalというチェックボックスを持っています。チェックボックスをオンにすると、this.state.Animalはtrueに設定され、animal-filter divが表示されます。

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

私の問題は、私は、動物の状態がtrueに設定された後、猫、犬、魚のこれらのチェックボックスが瞬時にtrueに設定したいということです。私は反応を知っているsetStateは状態を自動的に更新しないので、どうすれば動物のチェックボックスが「チェック」されているときに他のチェックボックスが真に設定されているのでしょうか？

状態を更新するための私のコード：

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

checkAnimal方法が劇的これは、その動物のチェックボックスにチェックが入っている、猫、犬、魚のチェックボックスを保証する

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

に単純化することができますその状態に同期しています。

はまた、それがcheckAnimal方法でアクセスされているようthis.state.animalと不適合であるJSXの資本Aとthis.state.Animalへの参照があります。

{this.state.Animal ?なので注意してください。

このようなエラーを検出するには、eslintのようなJavaScriptコードを使用することを検討してください。