如何解决更新输入内部的反应状态
我正在处理React Hook表单,并且正在尝试更新输入中已包含已保存数据的字段。
我在语法上有疑问,因为刷新页面后,输入中的数据仍然没有更改。
在这种情况下我该怎么办?谢谢。
const Form = () => {
const [value,setValue] = useState('');
const updateForm = e => {
setValue(e.target.value);
}
return (
<div onSubmit={updateForm}>
<Component type="text"/>
<Button type="submit" onClick={updateForm}></Button>
</div>
)}
解决方法
我要在这里刺一下,说Component
是输入。如果是这种情况,则必须在其上设置一个value
和onChange
道具以跟踪父Form
中的更改。如果Component
是您的 组件,则必须通过props公开它们。看起来就像
<Component value={value} onChange={e => setValue(e.target.value)} />
如果Component
在其“内部”有数据,则必须通过作为道具传入的处理程序将状态“提升”到父级,如我所展示的。如果Component
是第三方组件,则他们很可能已经将道具作为该组件的API的一部分。
我不知道您要如何在div上放置onSubmit
,但是通过POST向服务器提交onSubmit
时会使用form
。 / p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。