javascript - 设置对象属性的状态

Question

我有为每个更改处理程序创建函数的工厂方法:

makeHandleChange = changedProperty => newVal => {
    const newState = { ...this.state, [changedProperty]: newVal };
    this.setState({ ...newState });
  };

它正在被执行，例如:

onChange={this.makeHandleChange('phoneNumber')}

如何使用此函数设置属性对象的状态？

例如，我必须setState info.phoneNumber 属性:

state = {
    info: {
       phoneNumber: '',
    },
}

我如何使用这个 makeHandleChange 函数来做到这一点？

Answer 1

有两种方法可以让它发挥作用。一种是更新您的工厂代码，以便它考虑嵌套状态属性。另一种可能更简单的方法是在需要更新状态时传入整个嵌套对象。

例如，如果您有一个 input 字段来更新嵌套在 this.state.info 中的 phoneNumber 属性:

    <input
      type="text"
      onChange={e => this.makeHandleChange("info")({ ...this.state.info, phoneNumber: e.target.value})}
      value={this.state.phoneNumber}
    />

在传递给函数的对象中，确保在设置新值，以便不会覆盖/删除任何其他嵌套属性。