Comment puis-je vérifier si mon entrée obtient le focus du composant enfant lorsque je dois également explorer la référence dans le composant parent ?

Question

J'essaie de mettre à jour un style en fonction du fait qu'une entrée a le focus. Je sais que je peux utiliser useRef ici, mais inputRef est un accessoire facultatif qui peut être utilisé par le composant parent. Comment puis-je vérifier si l'entrée du sous-composant affiché ici obtient le focus ?

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

Vous pouvez évaluer l'état de focus d'une entrée en vérifiant useEffect 内的当前 document.activeElement . Comme ça :

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

Vous pouvez ensuite utiliser cet état pour styliser dynamiquement le div parent.