ReactJS多表单值合并存储问题：将值存入单变量的不同对象

你的handleChange函数当前只能更新顶层属性，但values是嵌套对象结构（contact、projects均为子对象），直接通过[e.target.name]赋值会覆盖整个嵌套对象，而非修改其中的具体属性，导致无法正确更新表单值。

提供两种可行方案，根据你的组件结构选择：

方案一：使用带层级的name属性 #

让输入框的name包含父对象标识（如contact.name），在handleChange中解析路径更新嵌套属性：

修改handleChange函数 #

const handleChange = (e: { target: { name: string; value: string } }) => {
  // 拆分name为父对象键和子属性键
  const [group, key] = e.target.name.split('.');
  if (!group || !key) return;

  setValues((prevInput) => ({
    ...prevInput,
    // 复制原父对象，更新指定子属性
    [group]: {
      ...prevInput[group as keyof ResumeViewType],
      [key]: e.target.value
    }
  }));
};

子组件Contact中的输入框写法 #

给每个input的name属性加上父对象前缀：

// 示例：name属性格式为"父对象键.子属性键"
<input
  type="text"
  name="contact.name"
  value={values.contact.name}
  onChange={handleChange}
  placeholder="姓名"
/>
<input
  type="email"
  name="contact.email"
  value={values.contact.email}
  onChange={handleChange}
  placeholder="邮箱"
/>

方案二：传递分组标识给handleChange #

通过柯里化函数给handleChange传入父对象标识，让子组件无需修改name格式：

修改handleChange为柯里化函数 #

const handleChange = (group: keyof ResumeViewType) => (e: { target: { name: string; value: string } }) => {
  setValues((prevInput) => ({
    ...prevInput,
    [group]: {
      ...prevInput[group],
      [e.target.name]: e.target.value
    }
  }));
};

传递分组后的handleChange给子组件 #

<Contact
  values={values}
  errors={errors}
  // 传入"contact"作为分组标识
  handleChange={handleChange('contact')}
/>

子组件Contact中的输入框写法 #

直接使用子属性名作为name：

<input
  type="text"
  name="name"
  value={values.contact.name}
  onChange={handleChange}
  placeholder="姓名"
/>
<input
  type="email"
  name="email"
  value={values.contact.email}
  onChange={handleChange}
  placeholder="邮箱"
/>

如果需要更严格的类型检查，可以为拆分后的key添加类型断言，确保它属于对应父对象的属性键。例如针对contact分组：

[key as keyof typeof prevInput.contact]: e.target.value

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