【React学习】React中ref的用法

ref可以让react方便快捷地拿到DOM元素，ref的用法主要有两种。

用法1：回调形式的ref
在ref中传入一个回调函数，回调函数的默认参数就是元素对象，给组件加一个属性用来存储元素对象。

<div id="app"></div>    <script type="text/babel">class Welcome extends React.Component{get=()=>{console.log(this.c.innerHTML)}render(){return(<div><div ref={a=>this.c=a}>hello</div><button onClick={this.get}>获取DOM元素</button></div>)   }}ReactDOM.render(<Welcome/>,document.getElementById("app"))</script>

方法2：React.createRef

<div id="app"></div>    <script type="text/babel">class Welcome extends React.Component{constructor(){super()this.myRef = React.createRef()}get=()=>{console.log(this.myRef.current.innerHTML)}render(){return(<div><div ref={this.myRef}>hello</div><button onClick={this.get}>获取DOM元素</button></div>)   }}ReactDOM.render(<Welcome/>,document.getElementById("app"))</script>

效果

【React学习】React中ref的用法相关推荐

Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法
获取本页面dom元素 <template><div id="app"><div ref="testDom">11111< ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
linux ksh教程下载,学习Linux中ksh的用法
熟悉Linux的朋友肯定都知道bash,它是Linux默认的命令行解释程序,熟悉Solaris的也应该知道csh, 但是csh用起来比较费劲,于是乎产生了Korn Shell (http://www. ...
linux ksh 用户名,学习Linux中ksh的用法
熟悉Linux的朋友肯定都知道bash,它是Linux默认的命令行解释程序,熟悉Solaris的也应该知道csh, 但是csh用起来比较费劲,于是乎产生了Korn Shell (http://www. ...
Linux中ksh的功能描述,学习Linux中ksh的用法
熟悉Linux的朋友肯定都知道bash,它是Linux默认的命令行解释程序,熟悉Solaris的也应该知道csh, 但是csh用起来比较费劲,于是乎产生了Korn Shell (http://www. ...
学习- vue 中 API $attr 用法
2.4.0新增定义:包含了父作用域不作为 prop 被识别(且获取)的 attribute 绑定( class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的 ...
git提交规范图-提问的智慧图谱-React 学习路线图- 达克效应
##git提交规范 git commit的提交规范 ##提问的智慧图谱好句 <span style="color:yellow"">一个成功的团队要有三种人 ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
react 子组件ref_React中Ref 的使用方法详解
本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯 ...

【React学习】React中ref的用法

【React学习】React中ref的用法相关推荐

最新文章

热门文章