返回顶部
首页 > 资讯 > 精选 >react中如何设置focus
  • 886
分享到

react中如何设置focus

2023-07-04 20:07:57 886人浏览 泡泡鱼
摘要

这篇文章主要介绍了React中如何设置focus的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中如何设置focus文章都会有所收获,下面我们一起来看看吧。react中设置focus的方法:1、在com

这篇文章主要介绍了React中如何设置focus的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中如何设置focus文章都会有所收获,下面我们一起来看看吧。

react中设置focus的方法:1、在componentDidMount中使用DOM元素;2、调用“this.input.focus()”的 DOM api即可使整体达到页面加载完成就自动focus到输入框的功能。

React 进入页面以后自动 focus 到某个输入框

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”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: react中如何设置focus

本文链接: https://lsjlt.com/news/347488.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react中如何设置focus
    这篇文章主要介绍了react中如何设置focus的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中如何设置focus文章都会有所收获,下面我们一起来看看吧。react中设置focus的方法:1、在com...
    99+
    2023-07-04
  • react中怎么设置focus
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react中怎么设置focus?React 进入页面以后自动 focus 到某个输入框在 React.js 当中你基本不需要和 DOM 直接打交道。Rea...
    99+
    2023-05-14
    React
  • css如何为表单元素设置:focus
    这篇文章给大家分享的是有关css如何为表单元素设置:focus的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为表单元素设置:focus有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。 使表单元素的焦点脱颖而...
    99+
    2023-06-27
  • React中如何设置多个className
    目录React设置多个className方法一:ES6 模板字符串 ``方法二:join("")方法三:classnames(需要下载classnames)Rea...
    99+
    2023-01-17
    React className React设置多个className React设置className
  • react如何设置style属性
    这篇文章主要讲解了“react如何设置style属性”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何设置style属性”吧!react设置style属性的方法:1、通过“<...
    99+
    2023-07-05
  • react如何设置div高度
    这篇文章主要介绍“react如何设置div高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何设置div高度”文章能帮助大家解决问题。react设置div高度的方法:1、通过css方式实...
    99+
    2023-07-04
  • react native删除线如何设置
    今天小编给大家分享一下react native删除线如何设置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react nat...
    99+
    2023-07-04
  • react native如何设置页面背景色
    这篇文章主要讲解了“react native如何设置页面背景色”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native如何设置页面背景色”吧!react native设置页面背...
    99+
    2023-07-04
  • CSS的focus-within如何使用
    这篇文章主要介绍“CSS的focus-within如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS的focus-within如何使用”文章能帮助大家解决问题。:focus-within是...
    99+
    2023-07-04
  • react如何快速设置文件路径别名
    React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写...
    99+
    2024-04-02
  • Vue中mintui的field如何实现blur和focus事件
    这篇文章主要为大家展示了“Vue中mintui的field如何实现blur和focus事件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中mintui的f...
    99+
    2024-04-02
  • react如何在React html中使用
    本篇文章为大家展示了react如何在React html中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基本使用<!DOCTYPE html><html l...
    99+
    2023-06-14
  • jquery如何判断元素是否被focus
    本文小编为大家详细介绍“jquery如何判断元素是否被focus”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何判断元素是否被focus”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先,我们需要...
    99+
    2023-07-06
  • React项目中动态设置环境变量
    目录使用 dotenv 库1. 安装 dotenv 库2. 创建 .env 文件3. 在项目中使用环境变量通过命令行参数传递环境变量1. 在 package.json 中定义命令2....
    99+
    2023-05-16
    React 动态设置环境变量 React 环境变量
  • 如何在 PHP 中设置 HTTP 代理设置
    在 PHP 中设置 HTTP 代理设置可以通过修改 `stream_context` 的参数来实现。下面是一个示例代码:```php...
    99+
    2023-09-26
    PHP
  • MySQL中 prompt如何设置
    这篇文章给大家介绍MySQL中 prompt如何设置,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Mysql prompt方法一:linux环境变量shell> export M...
    99+
    2024-04-02
  • oracle中如何设置process
    这篇文章给大家介绍oracle中如何设置process,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1、受操作系统参数的限制,操作系统中oracle用户使用的nproc参数要够大,否则...
    99+
    2024-04-02
  • mysql中如何设置sql_mode
    本篇文章为大家展示了mysql中如何设置sql_mode,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1,执行SQL查看select @@session....
    99+
    2024-04-02
  • MySQL中innodb_log_file_size如何设置
    这篇文章主要介绍了MySQL中innodb_log_file_size如何设置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 ...
    99+
    2024-04-02
  • mysql中如何设置Innodb_buffer_pool_size
    小编给大家分享一下mysql中如何设置Innodb_buffer_pool_size,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作