我正在嘗試根據輸入是否獲得焦點來更新樣式。我知道我可以在這裡使用 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;
您可以透過檢查
useEffect內的目前document.activeElement來評估輸入的焦點狀態。像這樣：React.useEffect(() => { if (document.activeElement === inputRef.current) { // update a different state variable } }, [inputRef.current])然後您可以使用該狀態在父 div 上動態設定樣式。