Установите фокус на поле реакции-bootstrap.Input, используя refs.x.getDOMNode.focus

JSX:

var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
        onclick: function () {
           this.refs.email.getDOMNode().focus();
           console.log('DOM element', this.refs.email.getDOMNode());
        }
        render: function () {
          return (
             <div>
                <Button onClick={this.onlick}>Login</Button>
                <Input ref='email' type='email' />
             </div>
            );
        },
    });  

Примечания:

Когда запускается кнопка onclick handler, поле ввода электронной почты должно получать фокус, но этого не происходит. Я обнаружил, что класс Input-bootstrap Input field представляет собой реальное поле ввода DOM внутри оберточного div. Это результат работы console.log:

<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0">
  <input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0.1:$input">
</div>

Похоже, что вход не получает фокус, потому что фокус применяется к оберточному div, который его отклоняет (я использую document.activeElement в консоли для проверки).

Вопрос в том, как сфокусироваться на реальном элементе input?

Примечание: Немного несвязанный, но React уважает свойство autoFocus. Это полезно, если фокус необходимо установить сразу после рендеринга. Тем не менее, это не заменяет программный путь.

Ответ 1

Попробуйте getInputDOMNode() вместо getDOMNode().

Ответ 2

в рендеринге

<FormControl
  type='text'
  ref={(c)=>this.formControlRef=c}
  />

в обработчике событий

someHandler() {
  ReactDOM.findDOMNode(this.formControlRef).focus();
}

Ответ 3

Так как findDOMNode больше не является предлагаемым методом и может быть устарел Facebook, вы должны использовать свойство autoFocus (которое предоставляется базой React, а не реакцией-bootstrap). Это кросс-браузер polyfill для атрибута HTML autoFocus.

<FormControl
  autoFocus
  ...
/>

Источники: