상위 구성 요소에 참조를 드릴해야 할 때 내 입력이 하위 구성 요소의 포커스를 받는지 어떻게 확인합니까?

Question

입력에 포커스가 있는지 여부에 따라 스타일을 업데이트하려고 합니다. 여기에서 useRef를 사용할 수 있다는 것을 알고 있지만 inputRef는 상위 구성 요소에서 사용할 수 있는 선택적 prop입니다. 여기에 표시된 하위 구성 요소의 입력에 포커스가 있는지 어떻게 확인할 수 있나요?

으아악

Answer 1

useEffect 内的当前 document.activeElement를 확인하여 입력의 포커스 상태를 평가할 수 있습니다. 이렇게:

으아악

그런 다음 해당 상태를 사용하여 상위 div의 스타일을 동적으로 지정할 수 있습니다.