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

问题描述 投票:3回答:1

我正在尝试编写一个包含<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个回答
4
投票

你最有可能不会将value道具传递给你的Input组件,这将导致text最初成为undefined,当你在update中设置文本时,它就会受到控制。

您可以更改代码以在每次使用时将value prop传递给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} />
    );
}
© www.soinside.com 2019 - 2024. All rights reserved.