関数を渡す

Question

handleDeleteToDoItemという名前の関数を、親のToDoContainerから子の子であるToDoListOfItemsに渡そうとしています。

これはしかし、私はthis.props.deleteToDoItemでそれを参照するとき、私はToDoListOfItems

の内側ToDoItemsをレンダリングしていたときに関数は、子クラスによって受信されることはありませんというエラーを取得しています<ToDoListOfItems toDoItems={this.state.toDoItems} deleteToDoItem={this.handleDeleteToDoItem} />

で行われます私がToDoContainerから渡された他の州はすべてdeleteToDoItemを除いて認識されており、私はここで間違っていたものを失いました。私のIDE（ウェブストーム）は変数が未解決であると私に伝えています。

親コンポーネントから子コンポーネントに関数を渡す方法はありますか？

おかげで、

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

class ToDoContainer extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      toDoItems: [], 
      toDoWhat: "" 
     }; 
     ... 

     this.handleDeleteToDoItem = this.handleDeleteToDoItem.bind(this); 

    } 


    handleDeleteToDoItem(uniqueID) { 

     let updatedItemList = this.state.toDoItems.filter(toDo => { 
      return toDo.uniqueID !== uniqueID; 
     }); 

     // Concat updated item list to blank array 
     this.setState({ 
      toDoItems: [].concat(updatedItemList) 
     }) 

    } 


    render() { 

     return (
      <div> 
       <div> 
        <div> 
         <ToDoListOfItems toDoItems={this.state.toDoItems} deleteToDoItem={this.handleDeleteToDoItem} /> 
        </div> 
       </div> 
       {/* TODO Create a form with a submit button to add items to the todolist */} 
       <form action=""> 
        <div> 
         {/* Capture the value of the form input */} 
         <input type="text" onChange={this.handleChangeToDoItem} value={this.state.toDoWhat}/> 
        </div> 
        <div> 
         <button onClick={this.handleAddToDoItem}>Add Item to List</button> 
        </div> 
       </form> 
      </div> 
     ); 
    } 
} 

// This is the container for all the indivdual items in the to-do list 
class ToDoListOfItems extends Component { 
    render() { 

     //TODO Put in styling for the list of items 

     // Use map() to iterate through each item in the to-do list, creating new elements in the list container 
     return (
      <ul> 
       {this.props.toDoItems.map(toDo => (
        <ToDoItem key={toDo.uniqueID} 
           id={toDo.uniqueID} 
           toDoWhat={toDo.toDoWhat} 
           completed={toDo.isDone} 
           onDelete={this.props.deleteToDoItem}/> 
       ))} 
      </ul> 
     ) 
    } 
} 

Answer 1

そのキー名の不一致の問題、ToDoItemにあなたはdeleteToDoItemによってキーonDeleteないことで機能を渡しているので：ここ

：だから内部

<ToDoItem key={toDo.uniqueID} 
    id={toDo.uniqueID} 
    toDoWhat={toDo.toDoWhat} 
    completed={toDo.isDone} 
    onDelete={this.props.deleteToDoItem}   // here 
/> 

コンポーネントはthis.props.onDeleteで利用可能になります。

提案：混乱を避けるには、キーdeleteToDoItemを使用してください。

Answer 2

はパラメータでhandleDeleteToDoItemを呼び出す矢印機能に等しいコンテナクラスにdeleteToDoItem小道具を作ってみましょう：また

... deleteToDoItem={uniqueID => this.handleDeleteToDoItem(uniqueID)} 

あなたが明示的に必要がないので、このように矢印の機能を使用することになりますハンドラ関数をバインドします。これを矢印の関数にすると（上記）、自動的に束縛されます。