Refactoring-Funktion in Reagieren mit Parametern

Question

Ich habe Kontrollkästchen, die ähnliche Dinge tun.

Funktionen:

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

Ankreuzfelder:

{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} 

ich dies in 1 Funktion Refactoring wollen und ihn mit einem Parameter: getting checkAnimal (Tier)

aber ich behalte Fehler wenn ich so etwas mache:

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

Gibt es eine Möglichkeit, einen Parameter über eine Funktion in einem Checkbox-Tag zu übergeben?

--edit

Dies ist der Fehler, den ich immer behalten, wenn ich einen Parameter checkAnimal hinzufügen:

nicht während einer bestehenden Zustandsübergang (wie in render) aktualisieren. Render-Methoden sollten eine reine Funktion von Requisiten sein.

Answer 1

Klingt wie eine gute Gelegenheit für eine Funktion höherer Ordnung, die eine Funktion ist, die eine andere Funktion zurückgibt.

So Ihre checkAnimal Funktion könnte wie folgt aussehen:

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

Die quadratische Klammer-Notation oben neu ist ES6 „computed property names“ -Funktion, die Sie dynamisch generierte Objektschlüssel haben können.

Das Ergebnis this.checkAnimal('Cat') läuft ein Rückgabewert sein:

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