更新输入内的反应状态

【问题标题】：Updating react state inside an input更新输入内的反应状态
【发布时间】：2020-12-26 20:04:23
【问题描述】：

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

【问题讨论】：

不清楚您遇到的实际问题

标签： reactjs forms input react-hooks state

【解决方案1】：

我要在这里戳一下，说Component 是输入。如果是这种情况，您必须在其上设置 value 和 onChange 属性以跟踪父级 Form 中的更改。如果Component 是你的组件，那么你必须通过props 公开它们，如果你还没有。它看起来像，

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

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

我不知道你想在 div 上放置 onSubmit 做什么，但在通过 POST 向服务器提交 form 时会使用 onSubmit。

【讨论】：