脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 自动 focus 输入框

React 进入页面后自动 focus 到某个输入框的解决方案

 更新时间：2024年02月20日 15:29:18   作者：徐同保  
React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下

在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener 的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 React.js 当中可以直接通过 setState 的方式重新渲染组件，渲染的时候可以把新的 props 传递给子组件，从而达到页面更新的效果。

React.js 这种重新渲染的机制帮助我们免除了绝大部分的 DOM 更新操作，也让类似于 jQuery 这种以封装 DOM 操作为主的第三方的库从我们的开发工具链中删除。

但是 React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框，你需要调用 input.focus() 的 DOM API，比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画，等等。

React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上 ref属性。

可以看到我们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

然后我们就可以在 componentDidMount 中使用这个 DOM 元素，并且调用 this.input.focus() 的 DOM API。整体就达到了页面加载完成就自动 focus 到输入框的功能（大家可以注意到我们用上了 componentDidMount 这个组件生命周期）。

我们可以给任意代表 HTML 元素标签加上 ref 从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
  componentDidMount () {
    this.input.focus()
  }
  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}
ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
);
</script>
</body>
</html>

另一种写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  render() {
    return <input type="text" ref={this.inputRef} />;
  }
  componentDidMount() {
    this.inputRef.current.focus();
  }
}
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);
</script>
</body>
</html>

到此这篇关于React 进入页面以后自动 focus 到某个输入框的文章就介绍到这了,更多相关React 自动 focus 输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在React框架中实现一些AngularJS中ng指令的例子

    在React框架中实现一些AngularJS中ng指令的例子

    这篇文章主要介绍了在JavaScript的React框架中实现一些AngularJS指令的例子,React使用Virtual DOM因而与普通的js框架有些不同,需要的朋友可以参考下
    2016-03-03
  • 30分钟带你全面了解React Hooks

    30分钟带你全面了解React Hooks

    Hooks是一种函数，该函数允许您从函数式组件 “勾住(hook into)”React状态和生命周期功能。Hooks在类内部不起作用 - 它们允许你无需类就使用 React。
    2021-05-05
  • React详细讲解JSX和组件的使用

    React详细讲解JSX和组件的使用

    jsx就是javsscript与xml结合的一种格式，是js语法的一种扩展，只要把html代码写在js中就是jsx。react中定义组件有3种写法：函数的方式、es5的写法、es6（类）的写法
    2022-08-08
  • react实现路由动画跳转功能

    react实现路由动画跳转功能

    这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下
    2023-10-10
  • React使用TypeScript的最佳实践和技巧

    React使用TypeScript的最佳实践和技巧

    在React项目中使用TypeScript可以显著提高代码的可维护性和可读性,并提供强大的类型检查功能,减少运行时错误,以下是一些优雅地将TypeScript集成到React项目中的最佳实践和技巧,需要的朋友可以参考下
    2024-06-06
  • VSCode配置react开发环境的步骤

    VSCode配置react开发环境的步骤

    本篇文章主要介绍了VSCode配置react开发环境的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React自定义hook的方法

    React自定义hook的方法

    Hook是 React 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能，这篇文章主要介绍了React自定义hook的相关知识,需要的朋友可以参考下
    2022-06-06
  • 一文详解React中Hook的作用和用处

    一文详解React中Hook的作用和用处

    Hook是一种函数，它可以让你在函数组件中“挂钩”到React状态和生命周期等特性，这篇文章主要和大家介绍了React中Hook的作用和用处，希望对大家有所帮助
    2023-05-05
  • React父组件数据实时更新了,子组件没有更新的问题

    React父组件数据实时更新了,子组件没有更新的问题

    这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React捕获并处理异常的方式

    React捕获并处理异常的方式

    这篇文章主要给大家介绍了React优雅的捕获并处理渲染异常方式,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11

最新评论