使用handleChange修改嵌套对象属性：能否处理state嵌套对象及input name？

你完全可以调整现有的handleChange函数和<input>的name属性，来适配this.state.salary.min/max这类嵌套对象的状态修改，而且还能兼容原来的扁平状态场景。下面给你具体的实现思路和代码示例：

第一步：调整<input>的name属性 #

给嵌套属性的输入框设置点分隔的name值，用点来表示状态的嵌套路径，比如：

<input
  type="number"
  name="salary.min"
  value={this.state.salary.min}
  onChange={this.handleChange}
/>
<input
  type="number"
  name="salary.max"
  value={this.state.salary.max}
  onChange={this.handleChange}
/>

第二步：修改handleChange函数支持嵌套路径 #

核心是要解析name里的路径，同时严格遵守React状态不可变的原则（不能直接修改原state对象）。这里提供一个通用的实现：

handleChange = (e) => {
  const { name, value } = e.target;
  // 把点分隔的路径拆分成数组，比如"salary.min"变成["salary", "min"]
  const pathSegments = name.split('.');

  this.setState(prevState => {
    // 先浅拷贝整个state，避免直接修改原对象
    const updatedState = { ...prevState };
    let currentLayer = updatedState;

    // 遍历路径，除了最后一个节点，每一层都做浅拷贝
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const key = pathSegments[i];
      currentLayer[key] = { ...currentLayer[key] };
      currentLayer = currentLayer[key];
    }

    // 更新最后一层的目标属性值（这里根据输入类型转成数字，你可以根据需求调整）
    const finalKey = pathSegments[pathSegments.length - 1];
    currentLayer[finalKey] = Number(value);

    return updatedState;
  });
};

为什么要这么做？ #

• 直接修改this.state.salary.min = value会绕过React的状态更新机制，导致组件无法触发重新渲染。
• 通过分层拷贝的方式，既精准更新了目标属性，又保证了其他未修改的状态部分保持不变，符合React的状态管理最佳实践。
• 这个函数还能兼容原来的扁平状态（比如name="username"这类非嵌套的属性），不需要额外写多个处理函数，复用性很强。

额外提示 #

如果你的嵌套层级更深（比如this.state.user.profile.salary.min），这个方法同样适用，只需要把name写成"user.profile.salary.min"即可。如果需要处理数组类型的嵌套状态，那就要在遍历路径的时候做对应的数组拷贝处理，但针对你问的对象嵌套场景，上面的代码已经足够用啦。

内容的提问来源于stack exchange，提问作者Георги Димитранов