Установите фокус на react-bootstrap.Поле ввода ссылки.X. getDOMNode.фокусировать

в 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().концепция focus () от Facebook отреагировал документы

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

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

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

вопрос в том, как сосредоточиться на реальных input элемент?

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