当我还需要将 ref 钻入父组件时，如何检查我的输入是否获得子组件的焦点？

Question

我正在尝试根据输入是否获得焦点来更新样式。我知道我可以在这里使用 useRef ，但是 inputRef 是一个可选的 prop，可以由父组件使用。如何检查此处显示的子组件的输入是否获得焦点？

import React, { RefCallback, FocusEventHandler } from "react";
import { RefCallBack } from "react-hook-form";

interface IInput {
  inputRef?: RefCallBack;
  onFocus?: FocusEventHandler<HTMLInputElement>;
}
const Input: React.FC<IInput> = ({ inputRef, onFocus }) => {
  return (
    <div>
      <input type="text" ref={inputRef} onFocus={onFocus} />
    </div>
  );
};

export default Input;

Answer 1

您可以通过检查 useEffect 内的当前 document.activeElement 来评估输入的焦点状态。像这样：

React.useEffect(() => {
  if (document.activeElement === inputRef.current) {
    // update a different state variable
  }
}, [inputRef.current])

然后您可以使用该状态在父 div 上动态设置样式。