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，它变得受控。

您可以更改代码，以在每次使用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} /> ); }提供一个空字符串的默认值。

<button type="button"><span class="icon-remove"></span><span class="sr-only">Close</span></button>

反应：使用useState的功能组件中的受控输入

1 个答案: