Question

我有复选框，它们做类似的事情。

功能：

constructor(props) {
   super(props);
    this.state = { 
       Dog:false,
       Cat:false,
       Fish:true,
       clickedAnimal:true 
    };
   this.checkCat = this.checkCat.bind(this);
   this.checkDog = this.checkDog.bind(this);
   this.checkFish = this.checkFish.bind(this);
 }

 checkCat(){
   this.setState({Cat: !this.state.Cat});   
 }
 checkDog(){
   this.setState({Dog: !this.state.Dog});   
 }
 checkFish(){
   this.setState({Fish: !this.state.Fish});   
 }

复选框：

{this.state.clickedAnimal ? 
  <div className="animal-filter">

    <p><input type="checkbox" checked={this.state.Cat} onChange=  {this.checkCat)} /> Cat </p>

    <p><input type="checkbox" checked={this.state.Dog} onChange={this.checkDog} /> Dog</p>

    <p><input type="checkbox" checked={this.state.Fish} onChange={this.checkFish} /> Fish</p>

  </div> : null}

我想将它重构为1个函数并用参数提供它：checkAnimal（animal）

然而，当我做这样的事情时，我一直都会遇到错误：

  <input type="checkbox" checked={this.state.Fish} onChange={this.checkAnimal(Animal)} /> Fish

有没有办法通过像这样的复选框标签中的函数传递参数？

- 编辑

如果我向checkAnimal添加一个参数，这就是我不断得到的错误：

在现有状态转换期间（例如render内）无法更新。渲染方法应该是道具的纯函数。

Answer 1

对于高阶函数来说，这是一个很好的机会，这是一个返回另一个函数的函数。

所以你的checkAnimal函数可能如下所示：

checkAnimal(animal) {
  return () => {
    this.setState({
      [animal]: !this.state[animal]
    }); 
  };
}

上面的方括号符号是新的ES6＆＃34; computed property names＆＃34;功能，允许您拥有动态生成的对象键。

运行this.checkAnimal('Cat')的结果将是返回值：

() => {
  this.setState({
    Cat: !this.state['Cat']
  });
}

使用参数

1 个答案: