javascript - React:使用 useState 控制功能组件中的输入
问题描述
我正在尝试编写一个包含 的功能组件<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
道具,或提供一个空字符串的默认值。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} />
);
}
推荐阅读
- javascript - Uncaught SyntaxError: missing ) 在 html 行中的参数列表抛出错误之后
- php - Symfony PHP - 在另一个服务中使用服务
- algorithm - 用于 BST 级别顺序遍历的惯用 Kotlin
- python - 如何将matplotlib对象传递/返回python中的函数
- angularjs - 更新调用丢失配置变量中的日期值
- c# - 在一个场景中更改一个对象会在 2 中更改它
- postgresql-9.3 - 为什么同一列上的索引大小不同
- c++ - 编码大于原文:How to take a strings of zero and one and write them as actual bytes to file
- javascript - 如何将日期时间与 10 分钟进行比较?
- javascript - 尝试将项目添加到 localStorage 但陷入无休止的刷新地狱