如何获取嵌套对象形式的用户输入？简化多表单块状态管理

我有一个由多个结构相同的输入块组成的表单，每个块都包含name输入字段。提交表单时，我希望得到如下嵌套对象形式的输入结果：

const resultInput = {
    block1: {
        name: ''
    },
    block2: {
        name: ''
    }
}

目前我通过多个useState状态及对应handleChange函数实现需求，提交时合并状态得到目标对象，还需将多个状态和处理函数传递给子表单组件。但实际场景中有3个输入块，每个块包含3个输入字段，请问是否存在更简洁的实现方式，无需为每个输入块单独设置状态和处理函数？

当然有更简洁的实现方式，核心思路是用单个useState管理整个表单状态，配合一个通用的变更处理函数：

• 初始化统一状态
  直接把目标嵌套结构作为初始状态，对应3个输入块每个3个字段的场景：

const [formData, setFormData] = useState({
  block1: { name: '', fieldA: '', fieldB: '' },
  block2: { name: '', fieldA: '', fieldB: '' },
  block3: { name: '', fieldA: '', fieldB: '' }
});

• 通用变更处理函数
  写一个适配所有输入的handleInputChange，通过参数区分目标块和字段：

const handleInputChange = (blockKey, fieldName) => (e) => {
  setFormData(prev => ({
    ...prev,
    [blockKey]: {
      ...prev[blockKey],
      [fieldName]: e.target.value
    }
  }));
};

• 简化子组件传参
  给子表单组件仅传递对应块的blockKey、该块的数据以及通用处理函数即可，子组件内部调用时传入当前块标识和字段名：

// 父组件渲染子组件
<FormBlock 
  blockKey="block1" 
  data={formData.block1} 
  onChange={handleInputChange} 
/>

// 子组件内部使用示例
<input
  value={data.name}
  onChange={onChange(blockKey, 'name')}
/>
<input
  value={data.fieldA}
  onChange={onChange(blockKey, 'fieldA')}
/>

• 提交直接使用状态
  提交表单时直接使用formData即可，完全符合你需要的嵌套结构，无需额外合并操作。

这种方式不管输入块和字段数量如何变化，都只需要一个状态和一个处理函数，大幅简化代码逻辑和组件间的传参成本。

内容的提问来源于stack exchange，提问作者qweezz