Question

我正在处理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>
 )}

Answer 1

我要在这里刺一下，说Component是输入。如果是这种情况，则必须在其上设置一个value和onChange道具以跟踪父Form中的更改。如果Component是您的组件，则必须通过props公开它们。看起来就像

<Component value={value} onChange={e => setValue(e.target.value)} />

如果Component在其“内部”有数据，则必须通过作为道具传入的处理程序将状态“提升”到父级，如我所展示的。如果Component是第三方组件，则他们很可能已经将道具作为该组件的API的一部分。

我不知道您要如何在div上放置onSubmit，但是通过POST向服务器提交onSubmit时会使用form。 / p>

更新输入内部的反应状态

1 个答案: