React 受控表单如何工作？

Question

我的反应有问题。使用表单，我创建了更多受控的输入。我创建了一个在表单更改时运行的函数。它只是更新了一个状态。但是反应给了我一个错误。

VM2529 react_devtools_backend.js:4026 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

handleChange 函数：

    let DefaultValue = {
        firsName: '',
        lastname: '',
        email: '',
        message: ''
    }

    const [output, setOutput] = useState(DefaultValue)

    const handleChange = (e) => {
        setOutput({ [e.target.name]: e.target.value });
    }

感谢您的回复。

Answer 1

setOutput({ [e.target.name]: e.target.value });

这不会与旧状态合并，它将替换旧状态。因此，如果它们更改 lastName，新状态将为 { lastName: "some string" }，并且所有其他值都将未定义。

相反，您需要从旧状态复制所有其他值：

setOutput(prev => ({
  ...prev,
  [e.target.name]: e.target.value
});

React 受控表单如何工作？

Fonctionnement formulaire contrôlé react?

reactjs

forms