Question

我有一个包含列表的盒子。该列表由todoItems组成。每个项目旁边都有一个删除按钮。该按钮应调用box类的delete方法。我应该先将其传递给班级列表吗？我可以直接在Box类中调用该方法吗？

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>
        );
    }
}

我的列表：在控制台中可以看到onTodoItemDeleteList，但显示为未定义。

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

我也通过在父级中使用箭头功能解决了这个问题，

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

并在构造函数中：

handleItemDeleteList = this.handleItemDeleteList.bind(this);

孩子们调用祖父母函数

1 个答案: