反应 useEffect 以保存 textarea 文本

Question

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

我不想使用 onChange 事件，因为它会随每次输入一起呈现所以我正在尝试使用 onSubmit 和 useEffect.

我是 React 新手，正在尝试理解 hooks。但是看了所有的文档还是一头雾水

我正在使用 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默认使用非受控组件。 Uncontrolled 意味着您不必自己控制状态，组件会为您处理它（在本例中为 IonTextarea）。这也意味着您的父组件没有 re-render 因为它不必反映依赖状态的变化，因为它没有任何变化。

您可以通过不初始化输入组件中的值来确保该组件不可控。您可以通过登录 render 方法来确认您的组件没有 re-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>

反应 useEffect 以保存 textarea 文本

React useEffect to save textarea text

html

reactjs

react-hook-form

现场演示