マップ関数内のReactJS onClickイベントを呼び出して親関数を呼び出す

Question

ReactJSを使い始めたばかりで、マップ関数内でonClickイベントをどのように動作させることができないのか分かりません。 子要素でonClick = {this.someMethodName}を使用していないときは、すべて正常に動作しているため、 'this'キーワードが親を参照していないと推測しています。

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

} 

どのように私はそれを動作させることができます：ここで

は、シンプルなメニューバーをレンダリング私のコード、ありますか？ 私はいくつかの同様の質問*を読んだが、彼らの解決策は私のためには機能しなかった、または私はそれらを働かせることができなかった。

*： 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

あなたのコードが動作しています。私はこのフィドルでそれを確認しました。私はちょうど小道具の代わりに配列をハードコードしました。

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/