我正在尝试编写一个包含<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
使这个成为受控元素 - 因为这显然不起作用:(
我究竟做错了什么?
你最有可能不会将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} />
);
}