Bagaimanakah saya boleh menyemak sama ada input saya mendapat fokus komponen anak apabila saya juga perlu menggerudi ref ke dalam komponen induk?

Question

Saya cuba mengemas kini gaya berdasarkan sama ada input mempunyai fokus. Saya tahu saya boleh menggunakan useRef di sini, tetapi inputRef ialah prop pilihan yang boleh digunakan oleh komponen induk. Bagaimanakah saya boleh menyemak sama ada input subkomponen yang ditunjukkan di sini mendapat fokus?

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

Anda boleh menilai keadaan fokus input dengan menyemak useEffect 内的当前 document.activeElement . Seperti ini:

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

Anda kemudian boleh menggunakan keadaan itu untuk menggayakan div induk secara dinamik.