React Refs

最新推荐文章于 2022-08-12 13:56:36 发布
最新推荐文章于 2022-08-12 13:56:36 发布
阅读量121 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple20154350217/article/details/112621776
版权
这个博客展示了如何在React中通过ref属性获取并聚焦输入框。代码示例中创建了一个名为MyComponent的类组件，定义了handleClick方法来使输入框获取焦点。在render方法中，使用ref='myInput'将输入框与引用关联，并在按钮点击事件中调用handleClick方法。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>React 实例</title>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">
		class MyComponent extends React.Component {
			handleClick() {
				// 使用原生的 DOM API 获取焦点
				this.refs.myInput.focus();
				//vue: 用ref绑定，用$refs获取；react：用ref绑定，用refs获取；
			}
			render() {
				// 当组件插入到DOM后，ref属性添加一个组件的引用于到this.refs
				return (
					<div>
						<input type="text" ref="myInput" />
						<input type="button" value="点我输入框获取焦点" onClick={this.handleClick.bind(this)}/>
					</div>
				)
			}
		}
		
		ReactDOM.render(
			<MyComponent />,
			document.getElementById('example')
		)
	</script>
</body>
</html>

 

小陈小陈 满眼星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 复习 refs
weixin_44428467的博客
06-24 123
1.string类型的ref已经过时了 2.使用回调形式的ref class Demo extends React.Component{ render(){ return( <div> <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder="
React学习笔记六-refs
zhangawei123的博客
05-25 1539
此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第六篇，主要介绍react中的refs。
react refs
qq_38799074的博客
03-05 430
refs使用场景 Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 设置refs createRef ref回调函数 ref字符串 useRef forwardRef useImperativeHandle refs传递
React refs
qq_43539854的博客
04-13 360
refs refs：提供了一种方式，是我们可以访问DOM节点或在render方法中创建React元素。 以下几种情况适用于refs： 管理焦点，例如文本框或媒体播放 触发强制动画 集成第三方DOM库 在官方文档中，React提醒我们不要过度使用refs。 回调形式的refs 在React16.3之前，都是使用回调函数的方式使用refs。 这个回调函数接收React组件实例或DOM元素作为参数，以使他们能在其他地方被存储和访问。 下面是一个关于refs使用回调函数获取输入框焦点的例子： import Re
React refs初级篇 简单调用refs
weixin_54259790的博客
08-24 150
React refs初级篇 简单调用refs 说明： 1.字符串方法可能在版本以后的版本弃用 // 类组件 class Demo extends React.Component{ render(){ return ( <div> <input ref="input1" type="text"/>
react Refs使用
01-07
import React, { Component } from 'react'; class Refsdemo extends Component { constructor(props) { super(props); this.state={ userInput: '' }; } //双向绑定 handleChange(e) { this.setState({ user...
React Refs 使用场景及核心要点
老司机的后备箱
08-12 1035
Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。...
前端大厂最新面试题-React refs.docx
最新发布
06-06
React中的Refs（引用）是一种机制，它允许开发者在React组件中直接访问DOM节点或React组件实例。这在处理特定交互、动画或者与第三方库集成时非常有用。在React中，有三种主要的方式来创建和使用Refs： 1. **字符串...
React中的refs的使用教程
08-27
React中的refs使用教程 React中的refs是指在React组件中使用的一种特殊属性，可以用来绑定到render()输出的任何组件上去。这个特殊的属性允许你引用render()返回的相应的支撑实例（backing instance）。这样就可以...
ReactDOM.render(...) 渲染方法
热门推荐
apple20154350217的博客
12-25 1万+
React代码的书写格式和以前的JS有很大的不同，下面通过对这段代码进行分析了解一下他。 以前使用Javascript定义一个变量用var，ES6加入了const关键字，用来定义一个常量： const div = document.createElement('div'); ReactDOM.render(...)是渲染方法，所有的js，html都可通过它进行渲染绘制，他有两个参数，内容和渲染目标js对象。 内容: 就是要在渲染目标中显示的东西，可以是一个React部件，一段HTML或TEXT文
React 组件API
apple20154350217的博客
01-14 256
一、设置状态 setState setState(object nextState[, function callback]) nextState 将要设置的新状态，该状态汇和当前的state合并 callback 可选参数，非必填，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。 setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。 class Counter extends React.Component{ constructor(props
为什么React要区分Class和function定义的组件？
apple20154350217的博客
01-13 204
React内部通过调用组件的定义来获取被渲染的节点，而对于不同的组件定义方式，其获取节点的步骤也不一样。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"&g
React State(状态)
apple20154350217的博客
01-08 142
一、React State(状态) React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，如何渲染UI，让用户界面和数据保持一致。 React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。 添加一个类构造函数来初始化状态this.state，类组件应始终使用props调用基础构造函数。 class Clock extends React.Component { constructor(props) {
React 组件生命周期
apple20154350217的博客
01-14 141
组件的生命周期可分成三个状态： Mounting: 已插入真实DOM Updating： 正在被重新渲染 Unmounting: 已移除真是DOM 生命周期的方法有： componentWillＭount: 在渲染前调用，在客户端也在服务端； componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他的JavaScript框架一起使用，可以在这个方法中调用setTiｍeout，set
React组件
apple20154350217的博客
01-07 108
一、介绍React组件的基本使用 React使用函数定义组件，接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.staticfile.org/react/16.
React 列表 & Keys
apple20154350217的博客
01-14 101
React 列表 & Keys const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => <li key={number}>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example') ); 注意：每个列表元素分配一个key，不.
使用 create-react-app 快速构建 React 开发环境
apple20154350217的博客
12-25 101
使用 create-react-app 快速构建 React 开发环境 cnpm install -g create-react-app // 全局安装create-react-app，如果不想全局安装，则不要-g create-react-app my-app // my-app是项目名 cd my-app npm start // 启动项目 浏览器运行http://localhost:3000/即可 ...
react refs 案例讲解
05-24
React Refs 是 React 提供的一种访问 DOM 元素或组件实例的方法。通过 Refs，我们可以在组件中直接访问到被 Refs 引用的 DOM 元素或组件实例，从而进行一些特殊的操作。 下面，我来举一个 React Refs 的案例： 假设我们有一个 Input 组件，需要在组件加载完毕后自动获取焦点，我们可以通过 Refs 来实现这个功能。具体的实现步骤如下： 1. 在 Input 组件中定义 Refs： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); // 创建 Refs } render() { return <input type="text" ref={this.inputRef} />; } } ``` 2. 在 componentDidMount 生命周期中，使用 Refs 获取到 input 元素，并调用 focus() 方法： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); // 创建 Refs } componentDidMount() { this.inputRef.current.focus(); // 获取 input 元素并获取焦点 } render() { return <input type="text" ref={this.inputRef} />; } } ``` 这样，当 Input 组件加载完毕后，它的 input 元素就会自动获取焦点了。 注意，Refs 只能在类组件中使用，不能在函数式组件中使用。另外，Refs 的值可以是回调函数，而不仅仅是 React.createRef() 方法返回的对象。如果使用回调函数的方式，可以在回调函数中访问到组件实例或 DOM 元素，例如： ```jsx class Input extends React.Component { constructor(props) { super(props); this.inputRef = null; // 创建 Refs this.setInputRef = element => { this.inputRef = element; }; } componentDidMount() { this.inputRef.focus(); // 获取 input 元素并获取焦点 } render() { return <input type="text" ref={this.setInputRef} />; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值