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

Question

我正在尝试编写一个包含 的功能组件<input>，但我收到“组件正在更改要控制的文本类型的不受控制的输入”。错误，无法弄清楚我做错了什么。

我已经将我的代码简化为这个，它重现了这个问题：

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，它成为控制。

您可以更改代码以在每次使用它时传入一个valueprop 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} />
    );
}