反应:使用 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组件，这将导致最初undefinedtext，并且当您在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} />
);
}