如何获取react-hook-form管控下的headless-ui受控组件ref？

要获取HeadlessUI Combobox的受控组件Ref，核心是把React Hook Form Controller提供的field.ref正确传递给HeadlessUI的Combobox.Input组件——这才是对应实际DOM的输入元素。具体实现方式如下：

• 在Controller的render回调中解构出field对象，其中包含React Hook Form用于控制组件的ref属性。
• 将field.ref直接赋值给Combobox.Input的ref属性，而非外层的Combobox容器组件（外层组件仅做逻辑封装，不对应实际输入DOM）。

关键代码示例 #

<Controller
  control={control}
  name="selectedOption"
  render={({ field }) => (
    <Combobox value={field.value} onChange={field.onChange}>
      <div className="relative mt-1">
        <Combobox.Input
          ref={field.ref} // 将ref绑定到实际输入元素
          className="w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
          displayValue={(option) => option?.label || ""}
        />
        {/* 其余Combobox子组件（如Options、Option）保持原有逻辑 */}
      </div>
    </Combobox>
  )}
/>

自定义保存Ref的扩展方案 #

如果需要将Ref单独保存，用于手动聚焦、读取DOM属性等额外逻辑，可以结合useRef同时保留React Hook Form的受控Ref：

const inputRef = useRef(null);

<Controller
  control={control}
  name="selectedOption"
  render={({ field }) => (
    <Combobox value={field.value} onChange={field.onChange}>
      <div className="relative mt-1">
        <Combobox.Input
          ref={(el) => {
            field.ref(el); // 优先绑定React Hook Form的受控Ref
            inputRef.current = el; // 同时保存到自定义Ref
          }}
          className="w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
          displayValue={(option) => option?.label || ""}
        />
      </div>
    </Combobox>
  )}
/>

这样既满足React Hook Form的受控组件校验要求，又能获取到实际输入元素的Ref，支持后续DOM操作需求。

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