Javascript 在 reacthookform 中用一个 handleSubmit 提交和处理两个表单

在我的Reaction应用程序中，我在一个页面上有两个地址表格，它们具有两个保存地址的功能，可以将地址保存在数据库中.还有一个提交按钮，用于提交两个字段并导航到下一页(The plus button in the circle adds the address to the saved addresses list):

我想要做的是验证表单域，我已经通过调用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(100 in RN)中.

这确实会逐个验证表单，但当我try 使用SUBMIT按钮提交整个页面时，问题就出现了.

我仍然希望在按下常规的SUBMIT按钮时能够同时验证这两个地址字段，但我不知道如何用一个handleSubmit验证这两个实例，并获得这两个字段的值的return data.

EDIT (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>
    )}
  />
);

Usage:个

<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),
    }}
/>

有没有可能做到这一点呢？