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

Question

В 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> 
      ); 
     }, 
    }); 

Примечание:

1. Поле ввода является react-bootstrap.Input классом. Концепция
2. getDOMNode(). фокус() от Facebook react docs

При запуске кнопки OnClick обработчик, то поле ввода электронной почты должен получать фокус, но это не происходит. Я обнаружил, что класс 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. Это полезно, если фокус необходимо установить сразу после рендеринга. Тем не менее, это не заменяет программный путь.

Answer 1

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

Answer 2

в не оказывают

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

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

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

Answer 3

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

<FormControl 
    autoFocus 
    ... 
/> 

Источники:

1. Focusing to the FormControl
2. Support needed for focusing inputs in modals?