전달 함수 아래 [반응]

Question

부모 ToDoContainer에서 자식 ToDoListOfItems까지 handleDeleteToDoItem이라는 함수를 전달하려고합니다.

이

은 <ToDoListOfItems toDoItems={this.state.toDoItems} deleteToDoItem={this.handleDeleteToDoItem} />

나는 내부 ToDoItems 렌더링있을 때 그러나, 나는이 기능은 내가 this.props.deleteToDoItem 그것을 참조하는 자식 클래스에 의해받은 적이되는 오류를 받고 있어요 이루어집니다 ToDoListOfItems

내가 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 
/> 

ToDoItem 구성 요소는 this.props.onDelete에 의해 사용 가능합니다.

제안 : 혼동을 피하려면 deleteToDoItem 키를 사용하십시오.

Answer 2

매개 변수를 사용하여 handleDeleteToDoItem 호출 화살표 함수에 컨테이너 클래스의 deleteToDoItem 소품이 동일하게 시도 : 그렇게 명시 적으로 할 필요가 없습니다 수 있습니다 이런 식으로 화살표 기능을 사용하여, 또한

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

을 핸들러 함수를 바인드합니다. 그것을 위의 화살표 함수로 만들면 자동으로 바인딩됩니다.