使用 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>
            );
        },
    });

备注：

输入字段是react-bootstrap.Inputclass。
getDOMNode().focus() 概念来自Facebook react docs

当按钮 onclick 处理程序运行时，电子邮件输入字段应该获得焦点，但它没有发生。我发现 react-bootstrap 输入字段 class 正在包装 div 内呈现真实的 DOM 输入字段。这是 console.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 属性。这在需要在渲染后立即设置焦点的情况下很有用。尽管如此，它仍然不能替代编程方式。

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)。这是 HTML autofocus 属性的跨浏览器 polyfill。

<FormControl
  autoFocus
  ...
/>

来源：

Answer 4

FormControl 提供 inputRef 属性

试一试，

<FormControl inputRef={ref => { this.input = ref; }} />

https://react-bootstrap.github.io/components/forms/

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

Set focus on a react-bootstrap.Input field using refs.x.getDOMNode.focus

reactjs

react-jsx

react-bootstrap