當我還需要將 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 上動態設定樣式。