reactjs - 通过扩展运算符反应状态操作

Question

我有这个初始状态：

this.state = {
    formInfo: {
        name: '',
        age: '',
        height: ''
    },
    errorMessage: ''
}

编辑表单时，状态应该更新，这就是我目前处理的方式：

handleInputChange = e => {
    const { name, value } = e.target
    this.setState({
        ...this.state,
        formInfo: {
            ...this.state.formInfo,
            [name]: value
        }
    })
}

如果此过程不符合行业标准，您能否为我提供更好的解决方案来操纵状态？

我怀疑是否有更有效的方法来存档它。

标签： reactjs

Answer 1

如果您要询问最佳实践，那么以下就是其中之一。你的代码很好。最好避免使用点表示法并提供默认值。

handleInputChange = e => {
  const {
    target: {
      name = '',
      value = '',
    } = {},
  } = e;

  const {
    formInfo,
  } = this.state;

  this.setState({
    formInfo: {
      ...formInfo,
      [name]: value,
    },
  });
}