react的ref三种使用方式，获取元素内容

react的ref三种使用方式，获取元素内容。
注意：应尽可能少的使用ref，优先使用state
1.字符串

  refGetData1=()=>{alert("获取到的内容："+this.refs.div1.innerText);}<div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div>

2.回调函数（推荐）

        refGetData2=()=>{alert("获取到的内容："+this.refData2.innerText);}
<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div>

3.React.createRef() ，react16.3新增方法

constructor(props){super(props)this.refData3=React.createRef()  // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点
}
refGetData3=()=>{alert("获取到的内容："+this.refData3.current.innerText);
}
<div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div>

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../node_modules/react/umd/react.development.js"></script><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><script src="../node_modules/babel-standalone/babel.min.js"></script>
</head><body><div id='test'></div><script type='text/babel'>class Test extends React.Component{constructor(props){super(props)this.refData3=React.createRef()  // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点}refGetData1=()=>{alert("获取到的内容："+this.refs.div1.innerText);}refGetData2=()=>{alert("获取到的内容："+this.refData2.innerText);}refGetData3=()=>{alert("获取到的内容："+this.refData3.current.innerText);}render(){return(<div><div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div><div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div><div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div></div>)}}ReactDOM.render(<Test/> ,document.getElementById('test'))</script>
</body></html>

react的ref三种使用方式，获取元素内容相关推荐

react的ref三种用法
第一种字符串的ref ref="myRef" 里面的绑定是字符串的绑定用法,这种ref的形式写多了影响效率问题,官方文档已经不推荐此写法 //创建类式组件class Demo e ...
ref的三种使用方式
ref的三种使用方式 ref使用的三种方式之方式一: out (已废弃) 1)第1步:<input ref="item" type="text" /> ...
JS标签的获取、js curd、事件的四要素、事件的三种注册方式和区别
1.掌握html和body标签的两种特殊获取方式(*****)---(重点) html: document.documentElement body: document.body le ...
如何从零开始创建React项目（三种方式）
在开发 React 项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建 React 项目的方式,分别是 "在浏览器中直接引入&qu ...
spring入门之Spring 常用的三种注入方式
Spring 常用的三种注入方式 Spring 通过 DI(依赖注入)实现 IOC(控制反转),常用的注入方式主要有三种:构造方法注入,set 方法注入,基于注解的注入. 一.通过构造方法注入先简单 ...
node.js Next框架的三种渲染方式：客户端渲染、SSG、SSR
前言 next是一款用JS开发的全栈框架,它是基于express框架基础上开发而成,可以用react写客户端,node.js写服务端.一份代码可在前后端同时运行,这在next中称之为同构! 一些nex ...
oracle Hash Join及三种连接方式
在Oracle中,确定连接操作类型是执行计划生成的重要方面.各种连接操作类型代表着不同的连接操作算法,不同的连接操作类型也适应于不同的数据量和数据分布情况. 无论是Nest Loop Join(嵌套循 ...
1.5 使用new创建动态结构和自动, 静态, 动态三种存储方式
1. 有些时候在运行时创建数组由于在编译时创建数组(有些时候不是这样, 比如使用OpenGL绘图和GPU并行计算结合的时候, 需要将大量的数据传送到显存, 每次计算完又要传送回宿主机渲染, 但并不是要 ...
python中if brthon环境安装包_Ant、Gradle、Python三种打包方式的介绍
今天谈一下Androdi三种打包方式,Ant.Gradle.Python. 当然最开始打包用Ant 很方便,后来转Studio开发,自带很多Gradle插件就用了它,然后随着打包数量越多,打包时间成了 ...

react的ref三种使用方式，获取元素内容

react的ref三种使用方式，获取元素内容相关推荐

最新文章

热门文章