React Hook Form：用单个handleSubmit处理并验证两个表单

针对你在React Native中使用react-hook-form时遇到的双表单全局提交验证问题，有两种适配场景的解决方案：

方案一：保留双useForm实例，手动触发验证并获取数据 #

这种方案无需改动现有单个表单的保存逻辑，仅新增全局提交的处理逻辑，适配你当前的代码结构。

步骤1：扩展useForm实例的解构 #

从两个useForm实例中额外解构出trigger（触发验证）和getValues（获取表单数据）方法：

// 寄件人表单Hook
const {
  control: senderControl,
  handleSubmit: handleSenderSubmit,
  setValue: senderSetValue,
  trigger: senderTrigger, // 新增：触发寄件人表单验证
  getValues: senderGetValues // 新增：获取寄件人表单数据
} = useForm({
  defaultValues: {
    senderName: '',
    senderLastName: '',
    senderPostalCode: '',
    senderPhone: '',
    senderAddress: '',
  },
});

// 收件人表单Hook
const {
  control: receiverControl,
  handleSubmit: handleReceiverSubmit,
  setValue: receiverSetValue,
  trigger: receiverTrigger, // 新增：触发收件人表单验证
  getValues: receiverGetValues // 新增：获取收件人表单数据
} = useForm({
  defaultValues: {
    receiverName: '',
    receiverLastName: '',
    receiverPhone: '',
    receiverPostalCode: '',
    receiverAddress: '',
  },
});

步骤2：编写全局提交函数 #

手动触发两个表单的验证，通过后统一获取数据并处理提交：

const handleGlobalSubmit = async () => {
  // 分别触发两个表单的全字段验证
  const isSenderValid = await senderTrigger();
  const isReceiverValid = await receiverTrigger();

  // 两个表单都验证通过后执行提交逻辑
  if (isSenderValid && isReceiverValid) {
    const senderData = senderGetValues();
    const receiverData = receiverGetValues();

    // 这里替换为你的实际业务逻辑：合并数据、提交到数据库、页面跳转
    console.log('全局提交数据：', { senderData, receiverData });
    // navigation.navigate('NextPage'); // 示例跳转代码
  }
};

步骤3：绑定全局提交按钮 #

将全局提交按钮的onPress事件绑定到上述函数：

<Button title="SUBMIT" onPress={handleGlobalSubmit} />

方案二：合并为单个useForm实例 #

如果愿意调整现有表单结构，可以将两个表单的字段合并到一个useForm中，用嵌套对象区分寄件人和收件人，实现更统一的表单管理。

步骤1：重构useForm实例 #

const {
  control,
  handleSubmit,
  setValue
} = useForm({
  defaultValues: {
    sender: {
      name: '',
      lastName: '',
      postalCode: '',
      phone: '',
      address: '',
    },
    receiver: {
      name: '',
      lastName: '',
      phone: '',
      postalCode: '',
      address: '',
    }
  },
});

步骤2：调整CustomInput的name属性 #

使用嵌套路径区分不同表单的字段：

// 寄件人邮编示例
<CustomInput
  control={control}
  name="sender.postalCode"
  rules={{ required: 'Postal Code is Required' }}
  placeholder="Postal Code"
  keyboardType="number-pad"
  textContentType="postalCode"
  customStyle={{ width: '49%', marginBottom: hp(1) }}
/>

// 收件人电话示例
<CustomInput
  control={control}
  name="receiver.phone"
  rules={{ required: 'Phone Number is Required' }}
  placeholder="Phone Number"
  keyboardType="phone-pad"
  textContentType="telephoneNumber"
/>

步骤3：处理单个表单保存与全局提交 #

• 单个表单保存：只提取对应部分的数据提交

// 保存寄件人地址
const handleSaveSender = handleSubmit((data) => {
  saveToDatabase(data.sender); // 仅提交寄件人数据
});

// 保存收件人地址
const handleSaveReceiver = handleSubmit((data) => {
  saveToDatabase(data.receiver); // 仅提交收件人数据
});

• 全局提交：一次验证所有字段并获取完整数据

const handleGlobalSubmit = handleSubmit((data) => {
  // data包含sender和receiver的所有字段数据
  console.log('全局提交数据：', data);
  // 提交后跳转页面
  // navigation.navigate('NextPage');
});

方案选择建议 #

• 若不想改动现有代码结构，方案一更适合，能快速实现全局提交需求；
• 若希望表单逻辑更统一、便于后续维护，方案二是更优选择。

内容的提问来源于stack exchange，提问作者Nima Zarei