更新輸入內的反應狀態

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是第三方組件，他們可能已經將 props 作為組件 API 的一部分。

我不知道您想在 div 上放置onSubmit做什么，但是在通過 POST 向服務器提交form時使用了onSubmit 。