I'm trying to update a style based on whether the input has focus. I know I can use useRef here, but inputRef is an optional prop that can be used by the parent component. How can I check if the input of the subcomponent shown here gets 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;
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can evaluate the focus state of an input by checking the current
document.activeElementinsideuseEffect. like this:React.useEffect(() => { if (document.activeElement === inputRef.current) { // update a different state variable } }, [inputRef.current])You can then use that state to dynamically style the parent div.