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

【问题标题】：React: controlled inputs in functional components using useStateReact：使用 useState 控制功能组件中的输入
【发布时间】：2019-03-11 17:59:00
【问题描述】：

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

我已将我的代码简化为这样，从而重现了问题：

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 来使其成为受控元素——因为这显然不起作用:(

我做错了什么？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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} />
    );
}

【讨论】：