React-hook-form结合shadcn/ui Combobox的ForwardRef警告解决问询

你的实现问题所在 #

直接把forwardRef关联到Combobox内部的Button元素是不正确的。React Hook Form的field.ref需要绑定到实际接收用户输入的<input>元素（也就是ShadCN Combobox里的输入框），而不是触发下拉的按钮。绑定到按钮不仅会让表单无法正确追踪输入值、校验状态，还不符合表单控件的ref绑定规范。

TypeScript 兼容的正确实现方案 #

我们需要用React.forwardRef封装ShadCN的Combobox组件，把外部传入的ref正确绑定到内部的输入框上，同时处理React Hook Form的field属性传递：

1. 封装带Ref的自定义Combobox组件 #

import React, { forwardRef } from "react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxTrigger,
} from "@/components/ui/combobox";

// 定义组件的Props类型，包含React Hook Form的field属性和Combobox的选项
type CustomComboboxProps = {
  field: {
    value: string;
    onChange: (value: string) => void;
    ref: React.Ref<HTMLInputElement>;
  };
  options: { label: string; value: string }[];
};

// 使用forwardRef，明确ref指向HTMLInputElement
const CustomFormCombobox = forwardRef<HTMLInputElement, CustomComboboxProps>(
  ({ field, options }, ref) => {
    return (
      <Combobox value={field.value} onValueChange={field.onChange}>
        <ComboboxTrigger asChild>
          <button>选择分类</button>
        </ComboboxTrigger>
        <ComboboxContent>
          {/* 把外部的ref（包括field.ref）绑定到ComboboxInput上 */}
          <ComboboxInput ref={ref} {...field} />
          {options.map((option) => (
            <ComboboxItem key={option.value} value={option.value}>
              {option.label}
            </ComboboxItem>
          ))}
        </ComboboxContent>
      </Combobox>
    );
  }
);

// 给组件命名，方便调试
CustomFormCombobox.displayName = "CustomFormCombobox";

export default CustomFormCombobox;

2. 在表单中使用该组件 #

在category-form.tsx里，通过React Hook Form的register或Controller使用这个自定义组件：

方式1：使用register

import { useForm } from "react-hook-form";
import CustomFormCombobox from "./CustomFormCombobox";

type FormValues = {
  category: string;
};

export default function CategoryForm() {
  const { register, handleSubmit } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  const categoryOptions = [
    { label: "前端开发", value: "frontend" },
    { label: "后端开发", value: "backend" },
    { label: "UI设计", value: "ui" },
  ];

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <CustomFormCombobox
        field={register("category")}
        options={categoryOptions}
      />
      <button type="submit">提交</button>
    </form>
  );
}

方式2：使用Controller（更适合复杂场景）

如果需要更精细的控制，比如默认值、校验规则，可以用Controller：

import { useForm, Controller } from "react-hook-form";
import CustomFormCombobox from "./CustomFormCombobox";

type FormValues = {
  category: string;
};

export default function CategoryForm() {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      category: "frontend",
    },
  });

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  const categoryOptions = [
    { label: "前端开发", value: "frontend" },
    { label: "后端开发", value: "backend" },
    { label: "UI设计", value: "ui" },
  ];

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="category"
        control={control}
        rules={{ required: "请选择分类" }}
        render={({ field }) => (
          <CustomFormCombobox field={field} options={categoryOptions} />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

关键说明 #

• forwardRef的泛型参数第一个是ref的类型（HTMLInputElement），第二个是组件的Props类型，确保TypeScript类型校验正确。
• 必须把ref和field.ref绑定到ComboboxInput上，这样React Hook Form才能正确获取输入值、触发校验和状态更新。
• 组件的displayName要手动设置，避免React DevTools里显示匿名组件，方便调试。

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