Reactの子コンポーネントにイベントを渡します。

Question

私はReactを初めて使用しました。これは非常に問題ではありますが、なぜ動作しないのか分かりません。

私は単純なtodoリストを作成しようとしています。

マイTodoList.jsコンポーネントは次のようになります。

import React, {Component} from 'react'; 
import TodoItem from './TodoItem'; 

    export default class TodoList extends Component{ 
     constructor(props){ 
     super(props); 
     this.state = { 
      todos:[ 
      { 
       title:"todo1" 
      }, 
      { 
       title:"todo3" 
      }, 
      { 
       title:"todo2" 
      } 
      ] 
     } 

     } 

     handleRemove(idx){ 
     alert('works'); 
     } 

     render(){ 
     var todos = this.state.todos.map(function(t,idx){ 
      return(<TodoItem 
        remove={this.handleRemove.bind(this,idx)} 
        title={t.title} 
      />) 
     }) 

     return (
      <div> 
      <h1>To do</h1> 
      <div>{todos}</div> 
      </div> 
     ) 
     } 
    } 

私の子コンポーネントは次のようになります。

import React, {Component} from 'react'; 

    export default class TodoItem extends Component{ 
     render(){ 
     return (
      <div>{this.props.title} 
      <button onClick={this.props.remove}>X</button> 
      </div> 
     ) 
     } 
    } 

しかし、私は「未定義の 『handleRemove』プロパティを読み取ることができません」とはTypeErrorを取得します。私はなぜマップの機能{this}が未定義であるのだろうかと思っていますか？

私はこのコンストラクタにthis.handleRemove = this.handleRemove.bind(this)を入れようとしました。

何も変更していません。 の中にthisも定義してはいけませんか？

Answer 1

あなたはthisArgパラメータがマッピングするために提供されている場合、それは コールバックのこの値として使用されますsecond argument

としてthisを配置する必要があります。それ以外の場合は、未定義の値は として使用されます。コールバックによって最終的に観測可能なこの値は、 と見なされるこれを決定するための通常の規則に従って決定される関数である。 map上

：

また

render(){ 
     var todos = this.state.todos.map(function(t,idx){ 
      return(<TodoItem 
        remove={this.handleRemove.bind(this,idx)} 
        title={t.title} 
      />) 
     }, this) 

     return (
      <div> 
      <h1>To do</h1> 
      <div>{todos}</div> 
      </div> 
     ) 
     } 
    } 

、あなたは自動的に現在のthisのコンテキストを維持するためにES6 arrow functionを使用することができます。

var todos = this.state.todos.map((t,idx) => { 
    return(<TodoItem 
    remove={this.handleRemove.bind(this,idx)} 
    title={t.title} 
    />) 
})