Puede verificar con document.activeElement siempre que el nodo de entrada esté montado y haya una referencia a él:

 const searchInput = React.useRef(null) if (document.activeElement === searchInput.current) { // do something } return <input type="text" ref={searchInput} />

Otra forma sería agregar detectores de eventos para los eventos de focus y blur dentro del campo de entrada:

 const [focused, setFocused] = React.useState(false) const onFocus = () => setFocused(true) const onBlur = () => setFocused(false) return <input type="text" onFocus={onFocus} onBlur={onBlur} />

Tenga en cuenta que esto llamará a volver a renderizar cada vez que el nodo esté enfocado o borroso (pero esto es lo que quiere, ¿verdad?)

Comencé con la respuesta dada por David, donde describe dos métodos, y ambos funcionaron para mí, pero tenía dudas sobre ambos:

1. En el primer caso utiliza findDOMNode , lo que tiene algunas desventajas: como mínimo se desaconseja su uso, y puede implementarse fácilmente de forma que se considere un antipatrón; y también puede hacer que el código sea más lento, omitiendo el DOM virtual y trabajando directamente con el DOM.

2. En la segunda opción, cree y administre un estado de componente solo para descubrir que la respuesta parece demasiado trabajo, puede perder la sincronización fácilmente y puede hacer que el componente se vuelva a procesar innecesariamente.

Entonces, después de intentar explorar más el problema, se me ocurrió la siguiente solución:

 if (this.props.id === document.activeElement.id) { // your code goes here }

Se aplica el mismo comentario sobre la respuesta de David:

Sin embargo, no debe hacer esto en el método de render , porque es posible que el nodo de entrada aún no esté montado. Use un método de ciclo de vida como componentDidUpdate o componentDidMount .

ventajas:

• utiliza las propiedades del componente actual (que son valores inmutables)
• no requiere administración estatal y, por lo tanto, no causará una nueva representación innecesaria
• no requiere atravesar DOM, por lo que el rendimiento debería ser tan bueno como sea posible
• no requiere crear una referencia de componente

Requisitos:

• su componente debe tener una propiedad de id que se pasa al elemento de formulario que desea verificar (lo que probablemente sea el caso de todos modos)

Usando ganchos:

Primero creas e inicializas tu Referencia

 const yourElement = useRef(null)

Luego, etiqueta su elemento con la referencia que acaba de crear:

 <div ref={yourElement}>Im an DOM node</div>

Y luego, usa esta lógica ya que necesita comparar si la propiedad del document.activeElement document.activeElement es igual al nodo DOM al que hace referencia

 yourElement.current === document.activeElement