使用useImperativeHandle时Input组件无法获取焦点问题排查

问题本质 #

当你使用useImperativeHandle时，完全替换了forwardRef传递的ref指向——原本父组件的inputRef应该指向内部的<input> DOM元素，但现在它指向的是你在useImperativeHandle里返回的自定义对象（仅包含someExposedProperty方法）。调用inputRef.current.focus()时，这个对象里根本没有focus方法，自然没法让输入框获取焦点。

解决方案 #

如果你既想保留自定义暴露的方法，又要让输入框能正常调用focus，需要在组件内部单独维护一个指向真实input的ref，然后在useImperativeHandle里把原生DOM方法也暴露出去：

import { forwardRef, useImperativeHandle, useRef } from "react";

const Input = forwardRef((props, ref) => {
  // 内部ref，专门指向真实的input DOM元素
  const internalInputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    // 保留你的自定义方法
    someExposedProperty: () => {
      alert("inside the exposed property function!");
    },
    // 显式暴露input的focus方法
    focus: () => {
      internalInputRef.current?.focus();
    },
    // 有需要的话，其他原生方法比如blur也可以加在这里
    blur: () => {
      internalInputRef.current?.blur();
    }
  }));

  // 把内部ref绑定到input上
  return <input type="text" ref={internalInputRef} />;
});

export default function Header() {
  const inputRef = useRef();
  return (
    <>
      <div className="container">
        <Input ref={inputRef} />
      </div>
      <button onClick={() => inputRef.current.focus()}>
        Add focus
      </button>
    </>
  );
}

如果不需要那个自定义的someExposedProperty方法，直接删掉useImperativeHandle代码块就行，这时候forwardRef会自动把父组件的ref传递给内部的input元素，调用focus就正常了。

补充说明 #

useImperativeHandle的核心作用就是自定义父组件能通过ref访问到的内容，默认情况下forwardRef会把ref直接透传给内部的DOM节点，但用了这个Hook后，ref.current就变成你返回的对象，所有需要父组件调用的方法都得显式写进去。

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