在react-hook-form中用一個handleSubmit提交和處理兩個表單

在我的反應應用程式中，我在一個頁面上有兩個地址表單，有兩個保存地址功能，將地址保存在資料庫中。還有一個提交按鈕，可以同時提交兩個欄位并導航到下一頁（圓圈中的加號按鈕將地址添加到保存的地址串列中）：

我想要做的是驗證表單欄位，我已經通過呼叫useForm()鉤子的兩個實體來做到這一點：

// useForm hook
  const {
    control: senderControl,
    handleSubmit: handleSenderSubmit,
    setValue: senderSetValue,
  } = useForm({
    defaultValues: {
      senderName: '',
      senderLastName: '',
      senderPostalCode: '',
      senderPhone: '',
      senderAddress: '',
    },
  });

  // useForm hook
  const {
    control: receiverControl,
    handleSubmit: handleReceiverSubmit,
    setValue: receiverSetValue,
  } = useForm({
    defaultValues: {
      receiverName: '',
      receiverLastName: '',
      receiverPhone: '',
      receiverPostalCode: '',
      receiverAddress: '',
    },
  });

然后，我將這兩個鉤子的 handleSubmit 方法分別添加到每個欄位的加號按鈕的 onClick （onPress在 RN 中）。

這確實確實單獨驗證了表單，但是當我嘗試使用SUBMIT按鈕提交整個頁面時會出現問題。

當按下通用提交按鈕時，我仍然希望能夠驗證這兩個地址欄位，但我不知道如何用一個來驗證這兩個實體handleSubmit并獲取return data兩個欄位的值。

編輯（CustomInput.js）：

const CustomInput = ({
  control,
  name,
  rules = {},
  placeholder,
  secureTextEntry,
  keyboardType,
  maxLength,
  textContentType,
  customStyle,
}) => (
  <Controller
    control={control}
    name={name}
    rules={rules}
    render={({field: {onChange, onBlur, value}, fieldState: {error}}) => (
      <View style={customStyle || styles.container}>
        <TextInput
          value={value}
          onBlur={onBlur}
          onChangeText={onChange}
          placeholder={placeholder}
          keyboardType={keyboardType}
          maxLength={maxLength}
          textContentType={textContentType}
          secureTextEntry={secureTextEntry}
          style={[
            styles.textInput,
            {
              borderColor: !error
                ? GENERAL_COLORS.inputBorder
                : GENERAL_COLORS.error,
            },
          ]}
        />
        {error && <Text style={styles.errMsg}>{error.message || 'error'}</Text>}
      </View>
    )}
  />
);

用法：

<CustomInput
    control={control}
    name="senderPostalCode"
    rules={{
      required: 'Postal Code is Required',
    }}
    placeholder="Postal Code"
    keyboardType="number-pad"
    textContentType="postalCode"
    customStyle={{
      width: '49%',
      marginBottom: hp(1),
    }}
/>

有沒有什么辦法可以做到這一點？

uj5u.com熱心網友回復：

感謝@TalgatSaribayev 的評論讓我找到了這個解決方案。

我不需要為地址欄位設定任何特定的驗證規則，最后我將發送者和接收者表單分成兩個不同的頁面。

首先，我必須指出，我沒有使用APIpostalCode獲取和address欄位的輸入值，而是使用鉤子獲取最新的值。getValues useWatch

// Watch inputs
const watchedInputs = useWatch({
  control,
  name: ['senderPostalCode', 'senderAddress'],
});

當我將輸入值保存getValues在一個變數中時，我得到了以前的狀態而不是最近的狀態，而解決這個問題的唯一方法就是getValues('INPUT_NAME')在我想獲得最新的狀態時呼叫。（最后我決定使用useWatch）。

///////////////////////////////////////// ////////////////////////////////////////

正如@TalgatSaribayev 指出的那樣，只創建一個useForm實體就足夠了。我所要做的就是創建一個函式來手動設定錯誤并在按下保存地址按鈕時檢查它們的驗證。

// Check if sender postal code input has error
const senderHasError = () => {
  if (!/^\d $/.test(watchedInputs[0])) {
    setError('senderPostalCode', {
      type: 'pattern',
      message: 'Postal Code must be a number',
    });
    return true;
  }
    
  // Any other rules
  if (YOUR_OWN_RULE) {
    setError('senderPostalCode', {
      type: 'custom',
      message: 'CUSTOM_MESSAGE',
    });
    return true;
  }
    
  // Clear error and return false
  clearErrors('senderPostalCode');
  return false;
};

問題是即使它們通過了驗證，錯誤也不會得到更新（清除）。好像無效輸入不會附加onChange事件偵聽器來重新驗證它。onSubmit當您以 .模式提交表單時默認發生的事情useForm。( https://react-hook-form.com/api/useform )

所以我決定使用trigger API來手動觸發表單驗證，并在按下保存地址按鈕時useForm監聽欄位的變化。postalCode

首先，我創建了一個切換狀態來更改觸發狀態：

// Postal code onSubmit event state
const [triggered, setTriggered] = useState(false);

然后僅當狀態設定為 true 并且輸入欄位的值已更改時才使用in a的triggerAPI來觸發輸入驗證：useFormuseMemotriggered

// Manually trigger input validation if postal code's onSubmit event is true
useMemo(() => {
  if (triggered) trigger('senderPostalCode');
}, [watchedInputs[0]]);

我假設我使用 API 觸發輸入欄位的方式與's 模式的trigger作業方式相同：當用戶通過更改狀態按下保存地址按鈕時啟動觸發器。useFormonSubmittriggersetTrigger

// Add address to sender favorites
const handleAddSenderFavAddress = () => {
  // Trigger on the press event
  setTriggered(true);

  // Return if sender postal code input has error
  if (senderHasError()) return;

  // SAVE ADDRESS LOGIC
  ///////////////////////////////
};

useForm除了'shandleSubmit 函式發生的一般驗證之外，這是我設法驗證單獨輸入欄位的唯一方法。

我歡迎任何可能導致更好解決方案的答案。

uj5u.com熱心網友回復：

您可以使用 useForm 掛鉤的單個實體，并使用相同的注冊方法在兩個表單中注冊所有欄位。

這樣，每當您單擊提交時，它將使用相同的注冊方法從以不同表單注冊的所有欄位中獲取值。

附上代碼沙箱鏈接供您參考

標籤：javascript 反应 反应式 形式 反应挂钩形式

上一篇：在select元素和<input>元素中添加:focus偽類type="file"

下一篇：面向物件-中級篇