React中如何用同一onChange函数将所有表单字段值存入同一数组

问题根源梳理 #

1. handleChange函数逻辑错误：你在更新state时错误展开了字符串value而非原state对象personneData，导致除gender外的字段state被覆盖成无效的索引结构，根本无法正确保留原有字段值。
2. react-hook-form与本地state混用冲突：同时使用register和手动维护的personneData、onChange、defaultValue，会导致表单状态管理混乱，两个状态源互相干扰。
3. 字段名称不匹配：日期字段的name="date_naissance"与state中的dateNaissance键名不一致，触发handleChange时无法对应到正确的state字段。
4. RadioGroup事件绑定不规范：将onChange绑定在单个FormControlLabel上，而非RadioGroup组件本身，不符合Material-UI组件设计逻辑，易导致事件异常。

方案一：修复本地State管理（适合新手理解手动状态逻辑） #

1. 修正handleChange函数

使用函数式更新确保基于最新state修改，同时兼容RadioGroup的事件格式：

const handleChange = (e) => {
  // 兼容RadioGroup的事件参数格式
  const target = e.target || e.currentTarget;
  const { name, value } = target;
  
  setPersonneData(prevState => ({
    ...prevState, // 展开原state，保留其他字段值
    [name]: value // 更新当前字段
  }));
};

2. 统一字段名称

将日期TextField的name改为dateNaissance，与state键名、register名称保持一致：

<TextField
  className={classes.root}
  defaultValue={personneData.dateNaissance}
  onChange={handleChange}
  name="dateNaissance" // 修正为与state一致的键名
  label="Date de naissance"
  type="date"
  InputLabelProps={{ shrink: true }}
  {...register("dateNaissance", { required: "Requis" })}
  error={!!errors.dateNaissance}
  helperText={errors.dateNaissance?.message}
  style={{ width: "40%" }}
/>

3. 调整RadioGroup事件绑定

将onChange移到RadioGroup上，简化选项配置：

<RadioGroup
  className={classes.root}
  row
  name="genre"
  value={personneData.genre} // 直接绑定state值
  onChange={handleChange}
  {...register("genre", { required: "Requis" })}
  error={!!errors.genre}
  helperText={errors.genre?.message}
>
  <FormControlLabel
    className={classes.root}
    value='1'
    control={<Radio />}
    label="Femme"
  />
  <FormControlLabel
    value='0'
    control={<Radio />}
    label="Homme"
  />
</RadioGroup>

4. 修复关闭按钮事件

将onClick={handleClose}改为onClick={handleCloseModal}，匹配组件传入的props：

<Button
  className="btn btn-secondary"
  role="button"
  onClick={handleCloseModal}
>
  Annuler
</Button>

方案二：使用react-hook-form完全管理状态（推荐，更简洁高效） #

既然已经引入react-hook-form，完全可以抛弃手动维护的personneData，让库帮你处理表单状态：

1. 配置react-hook-form默认值

const {
  register,
  handleSubmit,
  formState: { errors, values }, // 通过values获取实时表单值
} = useForm({
  defaultValues: {
    nom: "",
    prenom: "",
    genre: "",
    dateNaissance: ""
  }
});

2. 简化表单组件

移除所有defaultValue、onChange、checked属性，由react-hook-form自动处理：

// 姓名示例
<TextField
  className={classes.root}
  name="nom"
  label="Nom"
  {...register("nom", { required: "Requis" })}
  error={!!errors.nom}
  helperText={errors.nom?.message}
/>

// RadioGroup示例
<RadioGroup
  className={classes.root}
  row
  name="genre"
  {...register("genre", { required: "Requis" })}
  error={!!errors.genre}
  helperText={errors.genre?.message}
>
  <FormControlLabel
    className={classes.root}
    value='1'
    control={<Radio />}
    label="Femme"
  />
  <FormControlLabel
    value='0'
    control={<Radio />}
    label="Homme"
  />
</RadioGroup>

3. 提交时获取表单数据

在提交函数中直接获取整理好的表单对象：

const handleAdd = (data) => {
  // data结构为 { nom: '', prenom: '', genre: '', dateNaissance: '' }
  console.log(data);
  // 执行提交逻辑（如调用API）
  handleCloseModal();
};

内容的提问来源于stack exchange，提问作者néha