配列から返されるすべてのコンポーネントでボタンをどのように動作させることができますか？ ReactJS

Question

申し訳ありませんが、この質問は以前に回答されている場合。私はそれを探してみました。私は本当に答えを得るために何を検索するか分からない。私はReactの初心者ですので、どんな助けでも大歓迎です。

のlistItems変数の中では、私は項目配列、ボタンで各項目ごとにコンポーネントを返却しています。各コンポーネントのボタンでハンドルを放したい場合は、の機能を解除してください。現在、コンソールでエラーが発生します： "handleRemove は定義されていません"。

var TaskListComponent = React.createClass({ 
 
    
 
    getInitialState : function(){ 
 
    return { 
 
     items:["To do item 1","To do item 2","To do item 3"] 
 
    }; 
 
    }, 
 

 
    handleRemove : function(){ 
 
    console.log("test") 
 
    }, 
 
              
 
    render: function(){ 
 
    var listItems = this.state.items.map(function(item){ 
 
     return <li> {item} <button onClick={this.handleRemove}>X</button></li>; 
 
    }); 
 
    return(
 
     <div> 
 
     Child Container 
 
     <ul>{listItems}</ul> 
 
     </div> 
 
    ); 
 
    } 
 
});

結局私がarrayから、クリックされた対応する項目を削除するには、ボタンを取得できるようにしたいです。

ご迷惑をおかけして申し訳ありません。

おかげで、.map内部の機能をコンポーネントにバインドされていないので、起こって 萌え

Answer 1

あなたは他の答えのようにマップメソッドにコンテキストを渡す必要があるか、あなたの代わりに通常の機能の矢印機能を使用することができます。矢印関数はhandleRemoveメソッドを持つコンテキストを保持します。コードを次のように変換した場合：

var listItems = this.state.items.map((item,index) => { 
     return <li key={index}> {item} <button onClick={this.handleRemove}>X</button></li>; 
    }); 

期待どおりに動作します。これは、通常の機能と比較してarrow functionsの "this"のバインドについてもっと読むのに役立ちます

Answer 2

。

コンテキストを第2引数として渡してコンポーネントにバインドすることができます。

var listItems = this.state.items.map(function(item,index){ 
     return <li key={index}> {item} <button onClick={this.handleRemove}>X</button></li>; 
    },this); 

また、配列内の各子にキーを提供することを忘れないでください。

full working example