Question

我有2个组件-MasterList和DetailComponent

单击MasterList中的值会将数据发送到DetailComponent中的输入元素。
详细信息组件显示了通过的道具
详细信息组件也应该能够更新输入值

第1步和第2步正在运行，无法理解如何处理第3步。

以下是示例代码-Codesandbox

Answer 1

您可以使用收到的道具初始化表单状态。可以为输入分配状态值。输入的改变可以改变状态。

可以添加一个提交按钮，该按钮将使用状态值来更新数据。在这种情况下，您可能想要删除componentDidUpdate代码并将其添加到您的handleSubmit方法中。

constructor(props) {
    super(props);

    this.state = {
      username: props.user.username
    };
  }

handleSubmit = () => {
    const { dispatch } = this.props
    let payload = {
      username: this.state.username
    };

    dispatch(updateUser(payload));
  };

updateState = (key, value) => {
    this.setState({
      [key]: value
    });
};

<input
  type="text"
  value={this.state.username}
  onChange={val => this.updateState("username", val)}
/>

处理React表单的状态

1 个答案: