ReactJS onClick-Ereignis in Kartenfunktion, dann rufen Elternfunktion

Question

Ich habe gerade begonnen, mit ReactJS zu arbeiten, und ich kann nicht herausfinden, wie ich OnClick-Ereignisse innerhalb einer Map-Funktion arbeiten, die ein paar ähnliche Elemente macht. Wenn ich onClick = {this.someMethodName} in den untergeordneten Elementen nicht verwende, funktioniert alles einwandfrei. Daher nehme ich an, dass das Schlüsselwort 'this' nicht mehr auf das übergeordnete Element verweist.

Hier ist mein Code, die eine einfache menubar macht:

var SupplierBarComponent = React.createClass({ 
doSomething: function() { 
    console.log("aaaaaaaah"); 
}, 

render: function() { 

    const suppliers = this.props.data.map(function(supplier){ 
     return (
      <option onClick={this.doSomething} key={supplier.id}>{supplier.name}</option> 
     ); 
    }, this); 

    return(
     <div>{suppliers}</div> 
    ); 

} 

Wie kann ich es funktioniert? Ich habe ein paar ähnliche Fragen * gelesen, aber ihre Lösungen funktionierten nicht für mich, oder ich konnte sie nicht funktionieren lassen.

*: React onClick inside .map then change data in another sibling component "this" is undefined inside map function Reactjs Pass props to parent component in React.js

Answer 1

Ihr Code funktioniert. Ich habe es auf dieser Fiddle überprüft. Ich habe nur ein Array anstelle der Requisiten fest programmiert.

var Hello = React.createClass({ 
doSomething: function() { 
    console.log("aaaaaaaah"); 
}, 

render: function() { 
     var data=[{id:1,name:'name 1'},{id:2,name:'name 2'}] 
    const suppliers = data.map(function(supplier){ 
     return (
      <option onClick={this.doSomething} key={supplier.id}>{supplier.name}</option> 
     ); 
    }, this); 

    return(
     <div>{suppliers}</div> 
    ); 
} 
}) 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
); 

https://jsfiddle.net/evweLre5/