儿童称呼祖父母功能

Question

我有一个包含列表的框。该列表是由待办事项制成的。每个项目旁边的删除按钮。该按钮应调用框类的删除方法。我应该先将其传递给班级列表吗？我可以在类框中直接调用方法吗？

class TodoItem extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e)
    {
        const todoItemId = this.props.todoItemId;
        if (!todoItemId)
        {
            return;
        }
        this.props.onTodoItemDeleteList({ todoItemId: todoItemId });   
    }
    render() {
        return (
            <div className="todoItem">
                <button onClick={() => this.handleClick()}>delete</button>;
            </div>
        );
    }
}

我的列表：这里在控制台中看到了ontodoitemdemelitist，但显示为未定义。

class TodoItemList extends React.Component {
    constructor(props) {
        super(props);
        this.handleItemDeleteList = this.handleItemDeleteList.bind(this);
    }
    handleItemDeleteList(todoItemId)
    {
        //call handleItemDelete
    }
    render() {
        if (this.props.data)
        {
          var todoItemNodes = this.props.data.map(function (todoItem){
              return (
                <TodoItem todoItemId={todoItem.todoItemId} onTodoItemDeleteList={this.handleItemDeleteList}  key={todoItem.todoItemId}>
                </TodoItem>
              );
          });
        }
        return <div className="todoItemList">{todoItemNodes}</div>;
    }
}

我的盒子：这是我处理服务器的Ajax调用的地方。

class TodoItemBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }
    handleItemDelete(todoItemId) {
        const data = new FormData();
        data.append('todoItemId', todoItemId);
        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.deleteUrl, true);
        xhr.onload = () => this.loadTodoItemsFromServer();
        xhr.send(data);
    }
    render() {
        return (
            <div className="todoItemBox">
                <TodoItemList data={this.state.data} />
            </div>
        );
    }
}

Answer 1

i也通过在父母中使用箭头函数解决了它，看起来像这样：

onTodoItemDeleteList={ (todoItemId) => handleItemDeleteList(todoItemId)}

和构造函数：

handleItemDeleteList = this.handleItemDeleteList.bind(this);