用DOM元素的Refs在React中设置焦点

最新推荐文章于 2022-06-23 17:13:54 发布

原创最新推荐文章于 2022-06-23 17:13:54 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #refs #focus

收录于

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在React应用中利用Refs特性来实现对DOM元素的焦点设置，提升用户体验。

用DOM元素的Refs在React中设置焦点

import React from 'react'

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创造一个 textInput DOM 元素的 ref
    this.textInput = React.createRef();
  }
  render() {
  // 使用 `ref` 回调函数以在实例的一个变量中存储文本输入 DOM 元素
  //（比如，this.textInput）。
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

// 在需要时于其他地方把焦点设置在这个组件上
focus() {
  // 使用原始的 DOM API 显式地聚焦在 text input 上
  // 注意：我们通过访问 “current” 来获得 DOM 节点
  this.textInput.current.focus();
}