reactjs - 使用 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 react docs

当按钮 onclick 处理程序运行时，电子邮件输入字段应该获得焦点，但它没有发生。我发现react-bootstrap输入字段类正在包装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()。