React：使用 useState 控制功能组件中的输入

Question

我正在尝试编写一个包含 <input> 的功能组件，但我收到 "A component is changing an uncontrolled input of type text to be controlled." 错误并且无法弄清楚我做错了什么。

我已将我的代码缩减为这样，它重现了问题：

function Input({ value, onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}

我不太确定如何在这里使用 useState 使其成为受控元素——因为这显然不起作用 :(

我做错了什么？

Answer 1

您很可能没有将 value 道具传递给 Input 组件，这将导致 text 最初为 undefined，并且当您设置update 中的文本，它会受到控制。

您可以更改代码以在每次使用时将 value 属性传递给 Input，或者为 value 提供空字符串的默认值。

function Input({ value = "", onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}

React：使用 useState 控制功能组件中的输入

React: controlled inputs in functional components using useState

javascript

reactjs

react-hooks