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 反应文档

当按钮 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().

Answer 2

在渲染中

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

在事件处理程序中

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

Answer 3

由于findDOMNode不再是建议的方法并且可能被 Facebook 弃用，您应该使用该autoFocus属性（由 React 框架提供，而不是 react-bootstrap）。autofocus这是 HTML属性的跨浏览器 polyfill 。

<FormControl
  autoFocus
  ...
/>

资料来源：

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

Answer 4

FormControl 提供inputRef属性

试试看，

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

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