我不知道这里可能出了什么问题，但我正在按照教程编写相同的代码行，但是当我添加此代码块时似乎出现错误。
setTeacherLoginData({
...teacherLoginData,
[event.target.name]:event.target.value
});
我认为我的错误与此有关。
由于 value 属性未更新，因此无法编辑给定的输入字段。您可以通过向输入字段添加 onChange 事件和值属性来解决此问题
这是我到目前为止编写的代码
const [ teacherLoginData, setTeacherLoginData ] = useState({
email: '',
password: '',
});
const handleChange = (event) => {
setTeacherLoginData({
...teacherLoginData,
[event.target.name]:event.target.value
});
};
const submitForm = () => {
console.log(teacherLoginData);
};
return (
<input value="{teacherLoginData.email}" onChange="{handleChange}" type="text" className="form-control" />
<input value="{teacherLoginData.password}" onChange="{handleChange}" type="password" className="form-control" />
<button onClick="{submitForm}" className="btn btn-primary">Login</button>
)
除了Peetzweg的答案提到的问题外，表单输入上还缺少name属性。这意味着不会填充handleChange函数中的event.target.name。
您正在将文字字符串传递到html<input/>和<button/>的道具中。
这在原版 HTML 中设置<input/>和<button/>标签的属性是有意义的，但这不是你在 React 中想要的，它使用JSX而不是HTML语法。
网页示例：
<input value="{teacherLoginData.email}" onChange="{handleChange}" type="text" className="form-control" />
在 React 中，我们编写类似于 JS + HTML 的 JSX。 这里我们说的是props而不是 html 元素的attributes。您可以传递类似于html的props，但是您也可以使用{}大括号传递javascript对象。
JSX：
<input value={teacherLoginData.email} onChange={handleChange} type="text" className="form-control" />
注意到我从value中删除了""，并onChangeprop 实际传递函数而不是包含"teacherLoginData.email"的字符串。
如果你使用引号，你传递的是一个字符串，而不是函数的实际javascript引用。对于某些道具，它旨在传递一个字符串，即此<input/>的type和className道具。
以下是指向 JSX 文档的链接，可帮助您熟悉它： https://reactjs.org/docs/jsx-in-depth.html