Wie ruft man eine Funktion mit Argumenten in einer ES6-Klasse auf?

Question

Ich mache eine App in Reactjs mit einer ES6-Klasse für eine Komponente. Der Code funktioniert wie vorgesehen, bis ich eine Funktion innerhalb der Klasse mit Argumenten aufrufen möchte.

SampleClass.js

class SampleClass extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
     backgroundColor: 'yellow' 
     } 
    } 

    onChangeBackgroundColor(backgroundColor) { 
     this.setState({ 
     backgroundColor: backgroundColor 
     }) 
    } 

    render() { 
     return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}> 
     <span onClick={this.onChangeBackgroundColor.bind(this)} style={{background: 'white'}}> 
      Change element style 
     </span> 
     </div> 
    } 
} 

React.render(<SampleClass />, document.getElementById('container')); 

Ich bin in der Lage, eine Funktion gut ohne Argumente wie this.onChangeBackgroundColor.bind(this) zu nennen. Wenn ich versuche, ein Argument an die Funktion zu übergeben, bekomme ich einen Fehler in der Konsole Uncaught TypeError: Cannot read property 'bind' of undefined.

Ref Geige: https://jsfiddle.net/purezen/s6ap3m8s/3/

Answer 1

this.onChangeBackgroundColor.bind(this, arg1, arg2) 

Ihre Argumente in dem bind Anruf gehen sollten, nach this, wenn Sie wollen, an die Funktion gebunden zu sein.

Wie @ivarni angegeben und je die docs Reagieren ist es am besten in den Konstruktor zu binden, finden Sie in der untenstehenden Link für weitere Informationen

„Wir empfehlen, dass Sie Ihre Event-Handler in den Konstruktor zu binden, so dass sie nur gebunden sind einmal für jede Instanz:“

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

bearbeiten ich Ihre Geige, vorbei red Wert, und es funktioniert.

können Sie sehen, es here

Sie müssen die Argumente der bind Funktion

Answer 3

Eine bessere Möglichkeit, mit Klick zu tun passieren Bindung Wert dieser mit übergebenen Parameter zu korrigieren, wird mit ES6 lambdas () => wie sie lexikalisch binden Sie den korrekten Wert davon:

render() { 
    return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}> 
    <span onClick={() => this.onChangeBackgroundColor(arg1, arg2)} style={{background: 'white'}}> 
     Change element style 
    </span> 
    </div> 
}