Question

我试图将名为handleDeleteToDoItem的函数从父ToDoContainer传递给子ToDoListOfItems。

这是通过<ToDoListOfItems toDoItems={this.state.toDoItems} deleteToDoItem={this.handleDeleteToDoItem} />

完成的

但是，当我在this.props.deleteToDoItem内部ToDoItems引用ToDoListOfItems时，当我用ToDoContainer引用该函数时，我收到的错误是该子类没有收到该函数。 }}

我从deleteToDoItem传下来的所有其他状态都被识别，除了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> ) } }我失去了我已经完成的工作这里错了。我的IDE（Webstorm）告诉我变量未解析。

我应该将函数从父组件传递给子组件吗？

谢谢，

{{1}}

Answer 1

它是一个关键名称不匹配问题，因为在ToDoItem中您按键onDelete而不是deleteToDoItem传递函数：

下面：

<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

尝试使容器类中的deleteToDoItem prop等于使用参数调用handleDeleteToDoItem的箭头函数：

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

此外，以这种方式使用箭头功能使得您不需要显式绑定处理程序函数。将其设置为箭头功能（上图）并自动绑定。

传递函数[React]

2 个答案: