Rileva se l'elemento di input è focalizzato in ReactJS

Question

Come posso rilevare se un elemento di input come il seguente è attualmente focalizzato all'interno di una funzione di rendering ReactJS?

<input type="text" style={searchBoxStyle} placeholder="Search"></input> 

Answer 1

È possibile eseguire qualcosa di simile in qualsiasi momento fino a quando il nodo d'ingresso è montato e c'è un riferimento ad esso:

const ReactDOM = require('react-dom') 

if (document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)) 

si dovrà aggiungere un riferimento all'elemento di ingresso:

<input ref="searchInput" ... 

Non dovresti farlo nel metodo render, perché il nodo di input potrebbe non essere ancora montato. Utilizzare un metodo del ciclo di vita come componentDidUpdate o componentDidMount.

Un altro modo sarebbe quello di aggiungere listener di eventi per i focus e blur eventi all'interno del campo di introduzione:

<input type="text" onFocus={this.onFocus} onBlur={this.onBlur}... 

Poi impostare stati nei gestori e verificare che lo stato nel metodo di rendering.

onBlur: function() { 
    this.setState({ focused: false }) 
}, 
onFocus: function() { 
    this.setState({ focused: true }) 
}, 
render: function() { 
    if (this.state.focused) { 
     // do something 
    } 
    <input onFocus={this.onFocus} onBlur={this.onBlur}... 
} 

Si noti che questo chiamerà una ri-renderizzare ogni volta che il nodo è focalizzata o sfocata (ma questo è ciò che si vuole, giusto?)

Answer 2

Ho iniziato con la risposta data da David, dove ha descrive due metodi, ed entrambi lavorato per me, ma ho avuto preoccupazioni per entrambi:

1. al primo caso si utilizza findDOMNode, ciò che ha alcuni svantaggi: al minimo il suo utilizzo è scoraggiato, e può essere facilmente implementato in modo tale da essere considerato un anti-pattern; e inoltre può rallentare il codice, aggirando il DOM virtuale e lavorando direttamente con il DOM.

2. Nella seconda opzione, creare e gestire uno stato di componente solo per scoprire che la risposta sembra funzionare troppo, può facilmente uscire dalla sincronizzazione e può causare il rendering del componente inutilmente.

Quindi cercando di esplorare più il problema mi si avvicinò con la seguente soluzione:

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

Lo stesso commento sulla risposta di David vale:

Non si dovrebbe fare questo nel renderizza il metodo, poiché il nodo di input potrebbe non essere ancora montato. Utilizzare un metodo del ciclo di vita come componentDidUpdate o componentDidMount.

Vantaggi:

• utilizza le proprietà del componente corrente (quali sono i valori immutabili)
• non richiedono la gestione dello stato, e quindi non causerà inutili ri-rendering
• don' t richiesto DOM transversing, quindi le prestazioni dovrebbero essere uguali a quelle ottenute
• non è necessario creare un riferimento al componente

Requisiti:

• il componente dovrebbe avere e id proprietà che viene passato l'elemento del modulo che si desidera controllare (ciò che è più probabile che il caso comunque)