如何使用 refs.x.getDOMNode.focus 设置 React-Bootstrap 输入字段的焦点

介绍

React Bootstrap 是一个流行的库，用于集成支持 React 的 Bootstrap 用户界面组件。表单是任何应用程序的标准组成部分，各种表单控件（如文本输入、下拉菜单、文件上传、单选按钮和复选框）都需要动态运行。但有时用户提交的表单会出现错误，例如缺少必填信息或值无效。将焦点放在输入控件上会突出显示出现错误的特定输入框。

在本指南中，您将学习如何使用ref和getDOMNode()函数设置 React Bootstrap 输入控件上的焦点。

使用 refs.x.getDOMNode.focus 设置焦点

可以在<Form>控件内创建 React Bootstrap 输入控件，它是 React Bootstrap 库的一部分。

下一步是从 react-bootstrap 和 react-dom 导入所需的表单控件，如下所示。

      import ReactDOM from 'react-dom';
import { Form, Button } from "react-bootstrap";
    

现在，使用输入控件和按钮设置表单。

      render() {
    return (
      <div>
        <span>Simple bootstrap input focus</span>
        <div>
          <Form>
            <Form.Group controlId="myFormGroup">
              <Form.Label>Email id :</Form.Label>
              <Form.Control
                type="email"
                placeholder="Enter your email"
              />
            </Form.Group>
            <Button
              variant="primary"
              type="button"
            >
              FOCUS
            </Button>
          </Form>
        </div>
      </div>
    );
}
    

这是一个没有ref或按钮点击事件的基本表单。下一步是通过添加ref来更新表单控件，如下所示。

      <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control
        ref={c => (this.myInputRef = c)}
        type="email"
        placeholder="Enter email"
    />
</Form.Group>
    

表单控件中添加了一个名为ref 的属性，用于获取输入控件的引用。

添加ref后，接下来要添加按钮点击事件，如下所示。

      <Button
    variant="primary"
    onClick={this.setInputFocus}
    type="button"
    >
    FOCUS
</Button>
    

按钮点击事件是此演示中最重要的部分之一，因为一旦用户点击按钮，输入控件就会获得焦点。

      setInputFocus() {
    ReactDOM.findDOMNode(this.myInputRef).focus();
}
    

以下是您需要了解的一些重要内容。

ReactDOM：ReactDOM是用于将各种 DOM 元素的行为修改为组件的方法集合。

findDOMNode：findDOMNode有助于从 DOM 树访问特定的 DOM 节点，也可以用于访问来自该 DOM 节点的值。

focus()：focus方法主要与文本元素一起使用。它允许您突出显示底层 HTML 元素。

以下是聚焦输入元素的完整代码。

      import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Form, Button } from "react-bootstrap";

class BootstrapInput extends Component {
  constructor() {
    super();
    this.setInputFocus = this.setInputFocus.bind(this);
  }

  setInputFocus() {
    ReactDOM.findDOMNode(this.myInputRef).focus();
  }

  render() {
    return (
      <div>
        <span>Simple bootstrap input focus</span>
        <hr />
        <div>
          <Form>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                ref={c => (this.myInputRef = c)}
                type="email"
                placeholder="Enter email"
              />
            </Form.Group>
            <Button
              variant="primary"
              onClick={this.setInputFocus}
              type="button"
            >
              FOCUS
            </Button>
          </Form>
        </div>
      </div>
    );
  }
}

export default BootstrapInput;
    

不使用 findDOMNode 来聚焦输入

您已经学习了如何使用findDOMNode聚焦于 React Bootstrap 输入元素，但另外，也可以仅使用ref来实现。

访问 DOM 元素时有一个简单的变化，如下所示。

      setInputFocus() {
    this.myInputRef.focus();
}
    

focus ()方法直接使用ref即可使输入元素获得焦点。

注意：findDOMNode()在严格模式下已被弃用，从现在开始只有ref才足以直接访问 DOM 节点。

结论

React 通过使用 react-dom 包支持 DOM 操作方法和属性，这使我们能够访问和操作 DOM 元素的行为。

在本指南中，您已经了解了两种聚焦输入元素的方法：一种是使用findDOMNode()和focus()，另一种是仅使用元素ref。我希望本指南能帮助您访问 DOM 元素。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文