react-hook-form結合antd4使用學習

龙陌發表於2024-03-17
ReactHookORM

在render裡能否直接將field 傳遞給antd的input

當然可以，在render函式中，可以直接將field物件的部分或全部屬性傳遞給Ant Design的Input元件，這樣可以讓Input元件完全受控於react-hook-form的Controller元件。

例如，您可以像下面這樣簡化程式碼：

render={({ field }) => (
  <Input
    value={field.value}
    onChange={field.onChange}
    onBlur={field.onBlur}
    ref={field.ref}
    status={errors?.[dataIndex]?.message ? "error" : undefined}
  />
)}

這裡將field.value、field.onChange、field.onBlur和field.ref分別作為Input元件的value、onChange、onBlur和ref屬性，
這樣Input元件的值和狀態就會與react-hook-form的表單狀態保持一致。同時，也保留了根據表單驗證錯誤狀態設定Input元件狀態的邏輯。

useFormContext();返回的是什麼

useFormContext()是react-hook-form庫提供的一個Hook，它返回的是一個包含了表單所有控制方法和狀態的物件。

具體來說，這個Hook在有父級FormProvider包裹的情況下，能夠捕獲到該表單上下文的所有相關資訊。返回的物件通常包含以下屬性：

  1. control: 表單控制器物件，用於建立受控元件並與表單狀態進行互動。
  2. formState: 包含表單狀態的物件，如dirty（表單是否被修改過）、touched（欄位是否被觸控過）、errors（表單驗證錯誤物件）等。
  3. watch、register、unregister、handleSubmit、reset 等方法，用於監聽表單值變化、註冊/登出表單欄位、提交表單、重置表單等功能。

例如，在上述程式碼中，透過useFormContext()得到的物件被解構出control、formState和setValue屬性，分別用於實現對錶單欄位的控制、獲取表單狀態以及設定表單欄位的值。

既然如此，formMethods可能為空嗎

確實，formMethods（即const formMethods = useFormContext();的結果）有可能為空。
這種情況發生在沒有找到對應的FormProvider上下文時，因為useFormContext()是在試圖獲取當前元件樹中的表單上下文。

如果在沒有包裹在FormProvider之內的元件中呼叫useFormContext()，或者在FormProvider和當前元件之間存在多個層級且沒有正確傳遞上下文，那麼formMethods將會是undefined。

為了避免因formMethods為空導致執行時錯誤，程式碼中通常會對相關操作做保護性判斷，比如在呼叫formMethods的屬性或方法前確認它不是undefined。
在上面的程式碼示例中已經做了這樣的處理，如：

if (formMethods && formMethods.setValue) {
  formMethods.setValue(dataIndex, record[dataIndex]);
}

以及在渲染Controller元件前檢查formMethods.control是否存在。

相關文章