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;
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.