與參數反應的重構函數

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（動物）

不過，我不斷收到錯誤，當我做這樣的事情：

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

有沒有辦法通過這樣的複選框標籤中的函數傳遞參數？

--edit

這是我不斷收到如果我添加一個參數來checkAnimal錯誤：現有的狀態轉變（如render內）期間

無法更新。渲染方法應該是道具的純函數。

Answer 1

聽起來像是一個高階函數的好機會，它是一個返回另一個函數的函數。

所以你checkAnimal功能可能是這樣的：上面

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

方括號表示法是新ES6「computed property names」功能，它可以讓你有動態生成的對象鍵。

運行this.checkAnimal('Cat')將是一個返回值的結果：

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