iT邦幫忙

1

請問React useRef 綁定Input後,表單送出該如何清空輸入欄的值?

  • 分享至 

  • xImage

如題,我有一個表單,輸入欄位用ref綁定程式碼如下:

//定義ref
const titleRef = useRef<HTMLInputElement>(null)

//表單的input
<input 
  ref={titleRef} 
  id="add-title" 
  type="text" 
  className="border-[1.5px]" 
  required 
/>

我在點擊送出後想在submit方法裡用titleRef.current.value = ''
去清空輸入欄的值,但是TS會報錯:
'The left-hand side of an assignment expression may not be an optional property access.'

因為不想每次輸入都動到render所以沒有用state綁定欄位的值,想請教單純用useRef的狀態下如何在submit後 把titleRef.current.value變為null或空字串呢?

還請各位大大幫忙解惑,感激不盡!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
harry xie
iT邦研究生 1 級 ‧ 2022-10-07 13:59:27
最佳解答

hi~你好,我寫了一個簡單的範例,你可以參考做法,多個 if 判斷式去判斷想清除的物件是否為空

Example

jojoman iT邦新手 5 級 ‧ 2022-10-07 15:58:59 檢舉

感謝大大!看了您的寫法,後來瞭解到TS會要求一定要先判定ref.current是否存在,不然不給予賦值!問題解決了!

我要發表回答

立即登入回答