Parameter in ReactJS onclick übergeben

Question

Ich habe diese React-Komponente, die Elemente aus einer Liste (mit einer Kartenfunktion) generiert hat. Jedes dieser Elemente hat eine Schaltfläche. Ich möchte, dass der Onclick-Knopf dieser Taste einen Parameter übergibt, um zu identifizieren, auf welche Taste des Listenelements geklickt wurde.

Es sieht in etwa so aus.

var Component = React.createClass({ 
    assignItem: function(item){ 
     this.setState({item:item}) 
    }, 
    render: function(){ 
     var listItems = list.map(function(item){ 
     return <div>{item} 
     <button onClick={this.assignItem(item)>Click</button> 
     </div> 
     }) 
     return <div>{listItems}</div> 
    } 
}) 

Natürlich funktioniert das nicht. Die Fehlermeldung besagt, dass this.assignItem keine Funktion ist. ich die offizielle weiß Reagieren Dokumentation dies legt nahe:

var handleClick = function(i, props) { 
    console.log('You clicked: ' + props.items[i]); 
} 

function GroceryList(props) { 
    return (
    <div> 
    {props.items.map(function(item, i) { 
    return (
     <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div> 
    ); 
    })} 
</div> 
); 
} 
ReactDOM.render(
    <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode 
); 

aber das funktioniert mit einer Funktion außerhalb des Bauteils. Da ich möchte, dass meine Funktion den Zustand manipuliert, möchte ich ihn in der React-Komponente behalten.

Wie mache ich das?

Answer 1

Ursprüngliche akzeptierte Antwort:

können Sie bind auf eine Funktion auf this wie das Beispiel Reaktion, aber da Sie in einem map Rückruf rendern Sie müssen entweder pass in thisArg oder eine Funktion Fett Pfeil verwenden:

var Component = React.createClass({ 
    assignItem: function(item){ 
     this.setState({item:item}) 
    }, 
    render: function(){ 
     // bind to this.assignItem 
     var listItems = list.map(function(item){ 
      return <div>{item} 
       <button onClick={this.assignItem.bind(this, item)}>Click</button> 
      </div> 
     }, this); // pass in this, or use fat arrow map callback 
     return <div>{listItems}</div> 
    } 
}) 

-Update 2017:

Dies ist eine alte Frage ein old React API und eine entsprechend alte Antwort verwenden. Heute sollten Sie die class or functional React component API verwenden. Um Argumente an Click-Handler weiterzugeben, können Sie einfach einen Inline-Code fat arrow function schreiben und mit den gewünschten Parametern aufrufen. Das obige Beispiel endet wie folgt auf:

class MyComponent extends React.Component { // or React.PureComponent 
    assignItem = item => { // bound arrow function handler 
     this.setState({ item: item }); 
    } 
    render() { 
     var listItems = list.map(item => { 
      // onClick is an arrow function that calls this.assignItem 
      return <div>{item} 
       <button onClick={e => this.assignItem(item)}>Click</button> 
      </div> 
     }); 
     return <div>{ listItems }</div> 
    } 
} 

Hinweis: Die assignItem Handler gebunden werden muss, was hier geschehen ist ein Pfeil Funktion als class property verwenden.