reactjs 焦点集中在一个react-bootstrap上.输入字段使用refs.x.getDOMNode.focus

bakd9h0s  于 2022-11-22  发布在  React
关注(0)|答案(5)|浏览(128)

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类。

  1. focus()的概念来自Facebook react docs
    当button onclick处理程序运行时,电子邮件输入字段应该获得焦点,但实际上没有。我发现react-bootstrap Input字段类在 Package 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>

因此,看起来输入没有获得焦点,因为焦点应用于 Package div,它拒绝了它(我在控制台中使用document.activeElement进行检查)。
问题是,如何关注真实的的input元素?
注意:有点不相关,但是React尊重autoFocus属性。这在渲染后需要立即设置焦点的情况下很有用。但是,它不能代替编程方式。

xyhw6mcr

xyhw6mcr1#

请尝试getInputDOMNode()而不是getDOMNode()

pbgvytdp

pbgvytdp2#

在渲染中

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

在事件处理程序中

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

qnakjoqk3#

由于findDOMNode不再是建议使用的方法,Facebook可能会弃用它,因此您应该使用autoFocus属性(由React框架提供,而不是react-bootstrap)。这是HTML autofocus属性的跨浏览器多边形填充。

<FormControl
  autoFocus
  ...
/>

来源:
1.聚焦到表单控件

  1. Support needed for focusing inputs in modals?
wqsoz72f

wqsoz72f4#

表单控件提供inputRef属性
试试看,

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

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

q7solyqu

q7solyqu5#

或者您可以使用vanilla javascript并选择元素和设置焦点

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

相关问题