Дети, вызывающие функцию бабушки и дедушки - PullRequest
Новая
       22

Дети, вызывающие функцию бабушки и дедушки

0 голосов
/ 03 мая 2019

У меня есть ящик, содержащий список. Список состоит из todoItems. Кнопка удаления находится рядом с каждым элементом. Кнопка должна вызывать метод удаления класса box. Должен ли я сначала передать его в список класса? Можно ли вызвать метод напрямую в классе 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>
        );
    }
}

1 Ответ

0 голосов
/ 04 мая 2019

Я решил это с помощью функции стрелки в родительском элементе, он выглядит так: 

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

и в конструкторе: 

handleItemDeleteList = this.handleItemDeleteList.bind(this);
...