React：将数据设置为 state 后，React 输入字段不可编辑？

Question

我不知道这里可能出了什么问题，但我正在按照教程编写相同的代码行，但似乎在添加此代码块时出现错误。

setTeacherLoginData({
      ...teacherLoginData,
      [event.target.name]:event.target.value
    
});

我在想我的错误与此有关。

由于 value 属性未更新，因此无法编辑给定的输入字段。 您可以通过向输入字段添加 onChange 事件和 value 属性来解决此问题

这是我到目前为止写的代码

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>
)

Answer 1

您正在将文字字符串传递给 html input和button的道具。

您正在使用 vanilla HTML 表示法来设置input和button元素的属性。

<input value="{teacherLoginData.email}" onChange="{handleChange}" type="text" className="form-control" />

在 React 中，我们编写 JSX，类似于 JS + HTML。这里我们说的是props而不是 html 元素的attributes 。 您传递类似于 html 的道具，但是您也可以使用{}大括号传递 javascript 对象。

<input value={teacherLoginData.email} onChange={handleChange} type="text" className="form-control" />

注意到我从value和onChange道具中删除了""以实际传递函数而不是包含“teacherLoginData.email”的字符串。

如果您使用引号，则您传递的是一个字符串，而不是 function 的实际className引用。对于某些道具，它旨在传递一个字符串，即此<input/>的type和类名道具。

这是 JSX 文档的链接，可以让您熟悉它： https://reactjs.org/docs/jsx-in-depth.html

Answer 2

除了 peetzweg 的回答提到的问题之外，您的表单输入还缺少name属性。 这意味着您的handleChange function 中的event.target.name将不会被填充。