反应绑定并填充对象

Question

我有一个React组件，该组件保持本地状态，如下所示：

  this.state = {
      user : {}
    }

我在屏幕上有2个文本框，可在其中输入姓名和年龄。我正在从文本框中发送值，并在状态内填充用户对象，如下所示：

 onTextBoxChange = (e) => {

   // this.user is a property on the Component declared inside the // constructor
    this.user[e.target.name] = e.target.value

    this.setState({
      user : this.user 
    })
  }

是否存在一种更好的方法来填充由名称和年龄组成的用户对象。

Answer 1

您可以通过以下三种不同方式来实现相同目的：

1）无需创建this.user属性，而是可以使用局部变量来实现相同的目的。因此，该功能可以更改为：

onTextBoxChange = (e) => {
    let user = this.state.user;
    user[e.target.name] = e.target.value;
    this.setState({
        user: this.user 
    })
}

2）如果您没有在输入文本框中使用user状态作为值，那么您可以简单地使用this.user属性而不是使用状态，这将导致重新渲染。 例如，您可以在提交表单时使用this.user。

3）同样，如果您没有在输入文本框中使用user状态作为值，那么您也可以使用React refs并在提交表单时直接从元素获取值，例如。

Answer 2

无需创建额外的变量（let user =...）或成员变量（this.user）。

只需使用传播语法覆盖以前的值即可。

  onTextBoxChange = e => {
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value
      }
    });
  };

这是CodeSandBox上的完整版本。

Answer 3

您可以在父组件中尝试此操作：

onTextBoxChange = (field, value) => {
        this.setState({user:{
            ...this.state.user,
            [field]: value
        }   
        });
    }

，然后在子组件中：

onNameChange = (e) => {
    this.props.onChange('name', e.target.value)
}
onAgeChange = (e) => {
    this.props.onChange('age', e.target.value)
}