react-hook-form搭配reactstrap的Input组件提交表单无响应如何解决

数据老陈

2026-9-28

问题根因

react-hook-form（以下简称RHF）的register方法默认针对原生input元素设计，老版本reactstrap的Input封装组件不会透传默认的ref属性到内部原生input，而是使用innerRef属性接收内部DOM引用，导致RHF无法正确获取输入框实例、收集输入值，触发required校验规则后默认阻断表单提交，因此addList回调不会执行。切换为原生input可正常运行也进一步验证了ref传递异常的问题。

解决方案

提供两种适配方案，任选其一即可：

方案1：使用RHF的Controller组件（推荐，适配所有版本）

Controller是RHF官方提供的第三方UI组件适配工具，无需关注ref传递细节，适配性最强。
修改后的代码如下：
首先修改useForm的解构逻辑，新增control字段：

const { register, handleSubmit, formState: { errors }, getValues, control } = useForm();

然后替换原Input组件部分的代码：

<FormGroup>
  <Label >Name of new list</Label>
  <Controller
    name="name"
    control={control}
    rules={{ required: true }}
    render={({ field }) => <Input type="text" placeholder="name of list" {...field} />}
  />
  {/* 可新增错误提示，方便排查校验问题 */}
  {errors.name && <span className="text-danger">请输入列表名称</span>}
</FormGroup>

方案2：手动映射ref属性

如果是老版本reactstrap，可提前将register的返回值存为变量，手动把ref映射到Input的innerRef属性，避免重复调用register：

// 逻辑部分提前定义字段配置
const nameField = register("name", { required: true });
const { ref: nameRef, ...nameRestProps } = nameField;

// 组件渲染部分使用
<FormGroup>
  <Label >Name of new list</Label>
  <Input 
    type="text" 
    placeholder="name of list" 
    {...nameRestProps} 
    innerRef={nameRef} 
  />
</FormGroup>