Wykrywanie, czy element wejściowy jest skupiony w ReactJS

Question

Jak mogę wykryć, czy element wejściowy, taki jak poniższy, jest aktualnie skupiony w funkcji renderowania ReactJS?

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

Answer 1

można uruchomić coś takiego w każdej chwili, o ile węzeł wejściowy jest zamontowana i nie ma odniesienia do niego:

const ReactDOM = require('react-dom') 

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

Trzeba będzie dodać odwołanie do elementu wejściowego:

<input ref="searchInput" ... 

Nie powinieneś tego robić w metodzie render, ponieważ węzeł wejściowy może jeszcze nie zostać podłączony. Użyj metody cyklu życia, takiej jak componentDidUpdate lub componentDidMount.

Innym sposobem byłoby dodać detektory zdarzeń dla focus i blur wydarzeń wewnątrz pola wejściowego:

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

Następnie ustaw stany w ładowarki i sprawdzić, czy stan w sposobie renderowania.

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}... 
} 

Zauważ, że to wywoła ponowne renderowanie każdym razem, gdy węzeł jest skoncentrowany lub rozmazane (ale to jest to, co chcesz, prawda?)

Answer 2

Zacząłem od odpowiedzi udzielonej przez Dawida, gdzie opisano dwie metody, i oboje pracowali dla mnie, ale miałem obawy zarówno:

1. na pierwszym przypadku używa findDOMNode, co ma pewne wady: co najmniej jego stosowanie nie jest zalecane i może być łatwo wdrożone w sposób, który jest uważany za anty-wzór; a także może spowolnić kod, pomijając wirtualny DOM i bezpośrednio pracując z DOM.

2. W drugiej opcji utwórz stan komponentu i zarządzaj nim, aby znaleźć odpowiedź, która wydaje się zbyt duża, może łatwo zostać zsynchronizowana i może spowodować niepotrzebne ponowne renderowanie komponentu.

Więc próbuje zbadać więcej problemu wymyśliłem następujące rozwiązanie:

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

Ten sam komentarz na odpowiedź Dawida obowiązuje:

Nie należy to zrobić w metoda renderowania, ponieważ węzeł wejściowy może nie zostać jeszcze podłączony. Użyj metody cyklu życia, na przykład componentDidUpdate lub componentDidMount.

Zalety:

• używa bieżących właściwości komponentu (jakie wartości są niezmienne)
• nie wymagają zarządzania państwa, a zatem nie będzie powodować niepotrzebne re-rendering
• don” t wymagane przeniesienie DOM, więc wydajność powinna być tak dobra, jak się otrzymuje
• nie wymaga utworzenia odniesienia do komponentu

Wymagania:

• komponent powinien mieć i id właściwość, która jest przekazywana do elementu formularza, który chcesz sprawdzić (co jest najbardziej prawdopodobne w przypadku tak)