Wie überprüfe ich, ob meine Eingabe den Fokus der untergeordneten Komponente erhält, wenn ich den Verweis auch in die übergeordnete Komponente einfügen muss?

Question

Ich versuche, einen Stil basierend darauf zu aktualisieren, ob eine Eingabe den Fokus hat. Ich weiß, dass ich hier useRef verwenden kann, aber inputRef ist eine optionale Requisite, die von der übergeordneten Komponente verwendet werden kann. Wie kann ich überprüfen, ob die Eingabe der hier gezeigten Unterkomponente den Fokus erhält?

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 上动态设置样式。