反应useEffect以保存文本区域文本

Question

我正在尝试制作一个记事本，用户可以在其中编写文本区域并将其保存。 页面打开时，我希望相同的文本保留在文本区域中。

我不想使用onChange事件，因为它会随每次输入而呈现 因此，我尝试使用onSubmit和useEffect。

我是新来的反应者，试图理解钩子。但是阅读完所有文档后，我仍然迷路了。

我正在使用Ionic框架，下面是我的代码，

<IonCard>
       <form className="memo" onSubmit={handleSubmit(text)}>
             <IonItemDivider><IonLabel>관리자용 메모판</IonLabel></IonItemDivider>          
             <IonItem>
                  <IonTextarea id="memoTextarea" rows={28} value={text} name="memoTextarea" ref={register({})} ></IonTextarea>
             </IonItem>
             <IonButton type="submit" fill="solid">저장</IonButton>
       </form>
</IonCard>

有人可以帮助我，我将如何实现useEffect代码？

useEffect(()=>{
      

}, []);

我在handleSubmit()里面放什么？

Answer 1

react-hook-form默认使用不受控制的组件。 不受控制意味着您不必自己控制状态，组件可以为您处理状态（在这种情况下为IonTextarea）。这也意味着您的父组件不会重新渲染，因为它不需要任何依赖项即可反映出依赖状态的更改。

您可以通过 not 初始化输入组件中的值来确保该组件不可控。您可以通过登录render方法来确认您的组件不会重新渲染。

<IonTextarea
  id="memoTextarea"
  rows={28}
  // comment the following line will make the component uncontrollable
  // and your component never re-renders when you type
  // value={text}
  name="memoTextarea"
  ref={r => register(r)}
></IonTextarea>

实时演示