動的に生成されるコンポーネントのReact-onClick

Question

APIを照会し、アイテムのJSONリストを取得し、アイテムごとに個別のボタンを作成する単純なReactアプリケーションを作成しています。 API呼び出しが完了すると、アプリケーションの状態がJSONオブジェクトに変更され、render（）メソッドがボタンのリストをレンダリングします。

axios.get('http://api_url') 
.then(response => { 
    this.setState({applicationJSON: response.data}); 
}) 
.catch(function (error) { 
    console.log(error); 
}); 

問題は、私はこれらのボタンにonClickを添付できないということです。

これらのボタンのいずれかをクリックすると、handleClick（）が定義されていないというエラーが表示されます。

これは、コンストラクタでButtonアイテムを作成し、onClickをhandleClickにバインドするときに、handleClick（）が呼び出されるときのように、動的に生成される要素に問題があることは知っています。

Reactの動的生成コンポーネントのボタンクリックを処理する正しい方法は何ですか？我々は（text.map中）functionキーワードを使用する場合、その関数の内部thisが囲む範囲と同じthisを参照していないので、それは動作しません

Answer 1

理由があります。囲みスコープへの参照を保持することもできます。

renderItem(text) { 
    const self = this; 
     return (
      <div> 
       {text.map(function(name, index) { 
        return <Button text={text[index].name} onClick={self.handleClick} /> 
       })} 
      </div> 
     ); 
    } 

また、いくつかのES6言語機能を使用すると、全体を少しきれいにすることができます。マッピング機能も簡素化できます。

class MyComponent extends React.Component { 
    handleClick = (evt) => { 
     // do something 
    } 

    renderItem = (text) => { 
     return (
      <div> 
       {text.map(item => (
        <Button text={item.name} onClick={this.handleClick} /> 
       ))} 
      </div> 
     ); 
    } 
} 

ラムダ関数内部this（=>関数）関数の外側のコンテキストを指すので、これが機能します。