React表单修改输入值后无法传递变量问题求助

你的问题核心出在handleChange函数的实现上：

当前的handleChange直接把输入框的字符串值赋值给了turma状态，但turma原本是一个包含_id、period、startId的对象。修改输入后，turma被替换成了单个字符串，导致提交时：

• turma._id变成undefined（因为字符串没有_id属性）
• 解构period和startId时自然拿不到值，所以data变成空对象

修复步骤 #

1. 修正handleChange函数 #

需要根据输入框的name属性，更新turma对象中对应的字段，同时保留其他原有属性：

const handleChange = (f) => {
  const { name, value } = f.target;
  setClassroom(prev => ({
    ...prev,
    [name]: value
  }));
};

这里用函数式更新（prev参数）确保拿到最新的状态值，并用展开运算符...prev保留原有属性，再通过[name]: value动态更新对应字段。

2. 可选：初始化状态为对象 #

如果turma初始值是undefined，建议初始化为空对象，避免潜在的报错：

const [turma, setClassroom] = useState({});

3. 确认表单输入的绑定 #

你的表单输入已经正确设置了name属性和value绑定，这部分没问题，保持原样即可。

修复后的效果 #

修改输入字段后，turma依然是完整的对象，包含_id、更新后的period和startId，提交时就能正常传递所有变量了。

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