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>
);
},
});
Примечания:
- Поле ввода - это класс
react-bootstrap.Input. - Концепция getDOMNode(). focus() - это Facebook для взаимодействия с документами
Когда запускается кнопка 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. Это полезно, если фокус необходимо установить сразу после рендеринга. Тем не менее, это не заменяет программный путь.
