使用复选框使用 React 动态更新状态

Question

我有一个名为 Animal 的复选框。当复选框被选中时， this.state.Animal 设置为 true 并显示动物过滤器 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}

我的问题是，一旦动物状态设置为真，我希望猫、狗和鱼的这些复选框立即设置为真。我知道 react 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 来捕获这样的错误。