Как обновление от дочернего компонента в React передается родителю? - PullRequest
0 голосов
/ 28 мая 2019

Я работаю над списком Todo с быстрым реагированием и, похоже, не могу обновить элемент Todo из компонента TodoItem, который находится в основном компоненте приложения.когда я пишу функцию axios для изменения базы данных из самого дочернего компонента, Todo отключается после обновления состояния.

Я пытался отправить данные из дочернего компонента в родительский, но безрезультатно.

// App.jsx

                {this.state.data.map(data => (
                  <TodoItem
                    data={data}
                    key={data.id}
                    delete={() => this.removeFromDatabase(data)}
                    edit={() => this.setState({ editing: data.id })}
                    update={(data)=>this.updateDatabase(data)}
                  />
                ))}

// TodoItem.jsx

  handleSubmit = ()=>{
      var data = this.props.data;
      console.log(this.state.editText,data);
    // this.props.update(this.state.editText);
    axios.post('http://localhost:3007/todo/updateTodo',{
        id:data._id,
        update:this.state.editText
    })
    this.setState({isEditing:false})
  }
  //the input where we enter the edited value.
            <input
            type="text"
            style={editStyle}
            value={this.state.editText}
            className="form-control"
            onChange={this.handleChange}
            onBlur = {this.handleSubmit}
            onKeyDown ={this.handleKeydown}
          />



После отправки должно отображаться обновленное значение, вместо этого пустое задание.

1 Ответ

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

Для передачи данных от дочернего к родительскому компоненту необходимо использовать redux. С помощью redux вы можете dispatch actions от дочернего компонента, который будет изменять состояние reducer. И тогда вы можете использовать это состояние в любом месте вашего проекта. В вашем случае это состояние редуктора можно использовать для обновления родительского компонента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...