将焦点设置在react引导上。使用参照输入字段。x、 getDOMNode。集中

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引导。输入class

当ButtonOnClick处理程序运行时，电子邮件输入字段应该获得焦点，但它没有发生。我发现react引导输入字段类正在包装div中呈现真实的DOM输入字段。这是控制台的输出。日志：

<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，而包装div拒绝了它（我在控制台中使用document.activeElement进行检查）。

问题是，如何关注真正的输入元素？

注意：有点不相关，但React尊重autoFocus属性。在渲染后需要立即设置焦点的情况下，这非常有用。尽管如此，它并不能替代编程方式。

Answer 1

由于findDOMNode不再是建议的方法，Facebook可能会不推荐它，因此您应该使用autoFocus属性（由React框架提供，而不是React引导提供）。这是HTMLautofocus属性的跨浏览器多边形填充。

<FormControl
  autoFocus
  ...
/>

资料来源：

1. 关注表单控件

Answer 2

渲染中

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

事件内处理程序

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

Answer 3

尝试getInputDOMNode（）而不是getDOMNode（）。