使用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文档。

当单击按钮时，应该将焦点设置在电子邮件输入区域，但实际上没有发生。我发现react-bootstrap的Input字段类在外围包装了真正的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>

看起来输入框没有获取到焦点，因为焦点被应用在包裹的

上面了，导致被拒绝（我在控制台中使用document.activeElement进行检查）。

问题是，如何将焦点聚焦在真正的input元素上？

注意：有点无关紧要，但React尊重autoFocus属性。这在需要在渲染后立即设置焦点时非常有用。然而，它不能代替程序化的方法。

- tivoni

Answer 1

尝试使用getInputDOMNode()替代getDOMNode()。

- pedantech

---

需要注意的是，如果使用React 0.13，则应编写React.findDOMNode()，而在React 0.14之后，则应使用ReactDOM.findDOMNode()。 - Special Character

Answer 2

在渲染中

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

在事件处理程序中

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

- ChetPrickles

Answer 3

由于 findDOMNode 不再是推荐的方法，而且可能被 Facebook 废弃，因此您应该使用 autoFocus 属性（由 React 框架提供，而不是 react-bootstrap）。这是 HTML autofocus 属性的跨浏览器填充。

<FormControl
  autoFocus
  ...
/>

参考资料:

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

- Ryan H.

Answer 4

FormControl 提供了 inputRef 属性。

请尝试。

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

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

- keating

Answer 5

或者您可以使用原生JavaScript选择元素并设置焦点

document.getElementById("myInput").focus()

- Varghese Kurian