反応コンポーネント間に小道具を通す

Question

現在、私はthisチュートリアルを実行していますが、現在2つのコンポーネント間のイベントに問題があります。ここで

が最初です：

class TodoComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     todos: ['item 1', 'item 2', 'item 3', 'item 4'] 
    } 
    } 

    onDelete(item) { 
    const updatedTodos = this.state.todos.filter((val, index) => { 
     return item !== val; 
    }); 
    this.setState({ 
     todos: updatedTodos 
    }); 
    } 

    render() { 
    let todos = this.state.todos; 
    todos = todos.map((item, index) => { 
     return (
     <TodoItem item={item} key={index} onDelete={this.onDelete}/> 
    ); 
    }); 

    return (
     <div id="todo-list"> 
     <p>The busiest people have the most leisure...</p> 
     <ul>{todos}</ul> 
     </div> 
    ); 
    } 
} 

そして第二：

class TodoItem extends React.Component { 
    handleDelete() { 
    this.props.onDelete(this.props.item); 
    } 

    render() { 
    return (
     <li> 
     <div className="todo-item"> 
      <span className="item-name">{this.props.item}</span> 
      <span className="item-delete" onClick={this.handleDelete}> x </span> 
     </div> 
     </li> 
    ); 
    } 
} 

私はこのエラーを取得しています：

TypeError: this is undefined

bundle.js:10896:7

WebPACKのバンドルからの行は次のように参照していること方法を第2のモジュールから...

handleDelete() { 
    this.props.onDelete(this.props.item); 
} 

申し訳ありませんが、これは簡単な修正となります。これはReact for meの1日目です。

Answer 1

Reactにイベントハンドラがある場合、それらのハンドラに正しい値のthisをバインドすることを確認する必要があります。

あり、これを行うには、さまざまな方法がありますが、1つの簡単かつ一般的な方法は、あなたのハンドラでthisために意図した値を維持矢印機能、周りのあなたのハンドラをラップすることです：

// TodoItem 
<span className="item-delete" onClick={() => this.handleDelete()}> x </span> 

// TodoComponent 
<TodoItem item={item} key={index} onDelete={(item) => this.onDelete(item)}/> 

の背後にある理由は、これは、イベントハンドラがという非同期でと呼ばれ、thisが意図した値を指していることを確認する特別な注意を払っていない限り、thisという値はそのコンテキストでは未定義です。

は、さらに（MDN）を読み取る：this（矢印の機能について話すの項を参照）

編集：私は、実施例で、このJSFiddleを作成するために、あなたのコードを使用していました。