Определить, сфокусирован ли элемент ввода внутри ReactJS

Ответ 1

Вы можете запускать что-то подобное в любое время, пока установлен вход node, и есть ссылка на него:

const ReactDOM = require('react-dom')

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

Вам нужно будет добавить ссылку на элемент ввода:

<input ref="searchInput" ...

Вы не должны делать это в методе render, хотя, поскольку вход node еще не установлен. Используйте метод жизненного цикла, например componentDidUpdate или componentDidMount.

Другим способом было бы добавить прослушиватели событий для событий focus и blur внутри поля ввода:

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

Затем установите состояния в обработчиках и проверьте это состояние в методе рендеринга.

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

Обратите внимание, что это будет вызывать повторную визуализацию каждый раз, когда node фокусируется или размывается (но это то, что вы хотите, правильно?)

Ответ 2

Я начал с ответа Дэвида, где он описывает два метода, и они оба работали на меня, но у меня были проблемы с обоими:

• В первом случае он использует findDOMNode, что имеет некоторые недостатки: при минимальном использовании его обескураживают, и его можно легко реализовать таким образом, что он считается анти-шаблоном; а также он может сделать код медленнее, минуя виртуальную DOM и напрямую работать с DOM.

• Во втором варианте создайте и управляйте состоянием компонента только для того, чтобы найти ответ, который кажется слишком большим, может легко выйти из синхронизации и может привести к ненужному повторному рендерингу компонента.

Поэтому, пытаясь исследовать проблему, я придумал следующее решение:

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

Тот же комментарий к ответу Дэвида применяется:

Вы не должны делать это в методе рендеринга, потому что вход node еще не установлен. Используйте метод жизненного цикла, например componentDidUpdate или componentDidMount.

Преимущества:

• использует текущие свойства компонента (что является неизменяемыми значениями)
• не требуют управления состоянием и, следовательно, не будут вызывать ненужный повторный рендеринг
• не требуется DOM-трансверсация, поэтому производительность должна быть такой же хорошей, как и она.
• для создания ссылки на компонент не требуется

Требования:

• ваш компонент должен иметь и id свойство, которое передается элементу формы, который вы хотите проверить (что, скорее всего, так или иначе)