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不会自动更新状态，所以当动物复选框被＆＃34;检查时，我怎么做呢？＃34;其他复选框设置为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不兼容。

e.g。 {this.state.Animal ?请注意。

考虑使用像eslint这样的JavaScript代码linter来捕获这样的错误。

使用Checkbox使用React动态更新State

1 个答案: