React-hook-form如何点击按钮直接注册useState值无需填写表单输入

完全可以实现，直接用React Hook Form内置的setValueAPI就能完成手动注入表单值的需求，不需要额外添加不可见输入框或者其他冗余逻辑。

核心实现步骤 #

1. 从useForm钩子中解构出setValue方法，用于手动修改表单字段值
2. 给按钮绑定点击事件，在事件回调中批量把所有useState状态值写入对应的表单字段
3. 写入完成后直接调用你的多步表单下一步逻辑即可

完整示例代码 #

import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

// 定义表单字段的TS类型，可根据你的实际需求扩展
type FormFieldType = {
  designWidth: number;
  designHeight: number;
  designX: number;
  designY: number;
  designRotation: number;
  // 其他表单字段...
};

export default function FormComponent() {
  // 你的原有状态
  const [designWidth, setDesignWidth] = React.useState<number>();
  const [designHeight, setDesignHeight] = React.useState<number>();
  const [designX, setDesignX] = React.useState<number>();
  const [designY, setDesignY] = React.useState<number>();
  const [designRotation, setDesignRotation] = React.useState<number>();

  // 从useForm中解构需要的方法
  const { setValue, handleSubmit } = useForm<FormFieldType>();

  // 按钮点击事件
  const handleRegAndNext = () => {
    // 批量将state值写入表单
    setValue('designWidth', designWidth, { shouldValidate: true });
    setValue('designHeight', designHeight, { shouldValidate: true });
    setValue('designX', designX, { shouldValidate: true });
    setValue('designY', designY, { shouldValidate: true });
    setValue('designRotation', designRotation, { shouldValidate: true });

    // 这里替换为你的下一步逻辑
    // 多步表单直接切换步骤：setCurrentStep(step => step + 1)
    // 需要提交校验的话直接触发提交：handleSubmit(onSubmit)()
  };

  // 表单提交回调示例
  const onSubmit: SubmitHandler<FormFieldType> = (formData) => {
    console.log('完整表单数据：', formData);
  };

  return (
    <div>
      {/* 你的其他表单内容 */}
      <button type="button" onClick={handleRegAndNext}>注册并继续</button>
    </div>
  )
}

补充说明 #

• setValue的第三个配置项中shouldValidate: true表示写入值的时候会自动触发对应字段的校验规则，如果你不需要校验可以删除该配置
• 不需要为这些状态额外定义输入框，只要字段名匹配，写入的值会直接纳入React Hook Form的状态管理，后续提交时可以正常获取
• 如果你的状态可能为undefined，建议写入前加非空判断，或者把表单对应字段设为可选类型，避免TS类型报错

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