Come aggiungere argomenti al gestore eventi in ES6 Reagire quando le funzioni sono associate nel costruttore

Question

Con i costruttori in es6, si consiglia di associare anticipatamente le funzioni, ad es.

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); // bound early 
    } 

    handleClick() { 
    // do stuff 
    } 
    ... 
} 

In ES5, potremmo chiamare di solito qualcosa di simile this.handleClick.bind(this, "foo") se abbiamo voluto conservare contesto e inviare un argomento aggiuntivo. Qual è lo schema migliore per questo con la nuova sintassi di classe in ES6 React?

Per esempio, se la mia classe sembrava il codice qui sotto, come potrei migliore accesso al "foo" e "bar "valori? (So che la risposta non è bind ma questo è come ho potuto illustrare meglio il problema).

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); // bound early 
    } 

    handleClick(event, value) { 
    // do stuff with value ("foo" or "baz") 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.handleClick.bind("foo")} /> // incorrect code 
     <button onClick={this.handleClick.bind("bar")} /> // incorrect code 
     </div> 
    ) 
    } 
} 

Answer 1

Pensate che:

onClick={this.handleClick.bind(this)} 

è la stessa:

onClick={e => this.handleClick(e)} 

modo da poter fare:

<button onClick={e => this.handleClick(e, 'foo')} /> 
    <button onClick={e => this.handleClick(e, 'baz')} /> 

Alla fine è tutto solo JavaScript.

Answer 2

In ES5, potremmo in genere chiamare qualcosa come this.handleClick.bind(this, "foo") se volessimo conservare il contesto E inviare un argomento in più.

Si può fare esattamente lo stesso in ES6 pure. Non è come bind è stato rimosso dalla lingua :-)

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleFooClick = this.handleClick.bind(this, "foo"); // bind early 
    } 

    handleClick(value, event) { 
    //  ^^^^^^ notice the bound values come first 
    … 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.handleFooClick} /> // use early-bound 
     <button onClick={this.handleClick.bind(this, "bar")} /> // bind late 
     <button onClick={event => this.handleClick("foobar", event)} /> // arrow function 
     </div> 
    ) 
    } 
}