使用refs.x.getDOMNode.focus将焦点设置在react-bootstrap.Input字段上

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().focus()概念来自Facebook反应文档

当按钮onclick处理程序运行时,电子邮件输入字段应该获得焦点,但它不会发生.我发现react-bootstrap Input字段类正在渲染包装div中的真实DOM输入字段.这是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 框架提供，而不是 react-bootstrap）。这是 HTMLautofocus属性的跨浏览器 polyfill 。

<FormControl
  autoFocus
  ...
/>

资料来源：

1. 聚焦于 FormControl
2. 在模态中聚焦输入需要支持吗？