使用複選框使用React動態更新狀態

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不會自動更新狀態，所以我怎麼做，當動物複選框被選中時，其他複選框被設置爲true，反之亦然？

我的更新狀態代碼：

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

這將保證當動物複選框被選中，貓，狗，魚複選框將保持與其狀態保持同步。

另外，在jsx中提及this.state.Animal，其中的資本A與this.state.animal不兼容，因爲它是在checkAnimal方法中訪問的。

例如{this.state.Animal ?所以要小心。

考慮使用類似eslint的JavaScript代碼linter來捕獲那樣的錯誤。