位置: IT常识 - 正文

React中ref的使用方法和使用场景(详解)(react.fc)

编辑:rootadmin
React中ref的使用方法和使用场景(详解) 摘要

推荐整理分享React中ref的使用方法和使用场景(详解)(react.fc),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react ref,react中ref的用法,react form ref,react.fc,react.fc,react form ref,react.fc,react中的refs,内容如对您有帮助,希望把文章链接给更多的朋友!

不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref。

而Vue中的ref可能比较简单,这一篇主要讲一下如何在React中使用ref,以及使用ref的场景。

1.ref的挂载

在React中,ref可以挂载到html元素上,同时也可以挂载在React元素上,看下面的代码:

import React, { Component } from 'react'// import { findDOMNode } from 'react-dom'import Child from './Child'export default class Father extends Component { componentDidMount(){ console.log(this.refs.refElement); console.log(this.refs.child); } render() { return ( <div> <input ref={ 'refElement' }></input> <Child ref={ 'child' }/> <button onClick={this.fn}>123</button> </div> ) }}

控制台的打印为:

可以看到,在React中,ref是可以挂载到HTML元素和React元素上的。

(1)挂载HTML元素,返回真实的DOM (2)挂载React元素,返回render后的实例对象

React中ref的使用方法和使用场景(详解)(react.fc)

同时React也提供了一个方法findDOMNode可以将React元素的ref返回变成真实的DOM元素。

import { findDOMNode } from 'react-dom' console.log(findDOMNode(this.refs.child));

同时在上面的代码我们也可以看出来,ref的挂载是在componentDidMount等生命周期之前执行的。

2.使用ref的三种方式

(1)字符串的方式

import React, { Component } from 'react'export default class Father extends Component { componentDidMount(){ console.log(this.refs.refElement); } render() { return ( <div> <input ref={ 'refElement' }></input> <button onClick={this.fn}>123</button> </div> ) }}

这种方式和Vue的ref比较相似,但是官方目前已经不推荐使用该方式,后续可能还会废弃。

(2)函数的方式

import React, { Component } from 'react'export default class Father extends Component { componentDidMount(){ console.log(this.refElement); } render() { return ( <div> <input ref={ ref => this.refElement = ref }></input> <button onClick={this.fn}>123</button> </div> ) }}

(3)react.CreateRef的方式

import React, { Component } from 'react'export default class Father extends Component { refElement = React.createRef(); componentDidMount(){ console.log(this.refElement.current); } render() { return ( <div> <input ref={this.refElement}></input> <button onClick={this.fn}>123</button> </div> ) }}

记住这里面通过refElement中的current,获取真实的DOM元素。

3.ref的使用场景

这里我们说一个比较常见的场景,就是点击按钮让输入框聚焦:

import React, { Component } from 'react'export default class Father extends Component { refElement = React.createRef(); componentDidMount(){ console.log(this.refElement.current); } fn = ()=>{ this.refElement.current.focus(); } render() { return ( <div> <input ref={this.refElement}></input> <button onClick={this.fn}>聚焦</button> </div> ) }}

通过获取DOM后,调用DOM上的focus方法API,来让input框进行聚焦。

同时ref也可以适用于一些DOM元素的动画效果,例如移动,变大变小,都需要通过ref来控制DOM,进行操作。

本文链接地址:https://www.jiuchutong.com/zhishi/299288.html 转载请保留说明!

上一篇:Vue3 从入门到放弃 (第一篇.环境准备)(vue3的)

下一篇:出道即封神的ChatGPT,现在怎么样了?(真正的出道仙谁来封)

  • 餐饮发票公司怎么抵税
  • 资产负债表其他流动资产计算公式
  • 资产总额是营业收入吗
  • abc类企业是什么意思
  • 航天金税的服务费如何抵扣
  • 对公账户卡号是私人账号
  • 税负率怎么算计算公式举例说明
  • 土地增值税怎么做账
  • 增值税普通发票可以抵扣吗
  • 小企业无形资产有
  • 存货报废应如何记账
  • 公司开展文体活动总结
  • 国外公司进口能退税吗
  • 物业公司收取水费如何开具发票
  • 工程预缴税款几个点
  • 小微企业免税销售额怎么算
  • 支付宝对公账户还款清零要多久
  • 辅助生产成本科目月末有余额吗
  • 母公司并购子公司需要股东会决议吗
  • 汇总申报怎么申请
  • 汽车折旧计算方法按照公里
  • 固定资产折旧和累计折旧的区别
  • 外资企业注销需要商务局备案吗
  • 生产销售部门职责
  • 到期一次付息债券的实际利率怎么算
  • 版权许可授权书
  • 招标公司返回的钱怎么算
  • 怎么修改以前年度的账
  • 超期未认证的进项发票怎么处理
  • 个人开收据应该注意什么
  • 取得专票怎么结转销售成本
  • 核定征收的企业所得税怎么算
  • 业务招待费用列支范围
  • 空调维修费进什么会计科目
  • phpize安装
  • resnet+unet
  • 红字增值税发票怎么开具图解
  • vue实战技巧
  • 通信原理简明
  • 哈士奇宠物狗
  • 主营业务成本可以设置二级科目吗
  • sql server 2005 win10
  • 公司会计日常工作内容
  • 工程结算属于哪类账户
  • 会计账簿有哪些作用
  • 外贸公司进口关税增值税的帐务处理流程
  • 商品损耗进项税额怎么算
  • 工会经费网上怎么申报
  • 账本更正方法
  • 递延收益与递延负债的区别
  • 应付账款的逾期利息计入什么科目
  • 应交增值税一转出未交增值税
  • 未分配利润的
  • 在建工程转固后计提折旧
  • 建账的要点
  • 旅游饮食服务企业会计核算的特点
  • mysql转移表数据表
  • solaris教程
  • 怎么查看445端口有没有关闭
  • win7怎么清除记录
  • Gene6 FTP在windows 2008上面破解后无法启动解决方法
  • mac怎么共享wifi密码给iphone
  • win7更改电脑设置在哪里
  • win7旗舰版怎么进入bios
  • win10预览版和正式版
  • xp如何禁用445
  • 欢迎使用本公司智能语音电动车
  • ExtJS4中使用mixins实现多继承示例
  • linux如何启动tomcat
  • unity shaders and effects cookbook
  • js获取浏览器当前访问的ip
  • unity3d碰撞体
  • 创建一个新用户user1,设置其主目录为/home/user1:
  • New AssetBundle build system in Unity 5.0
  • 河北省网上税务局电子税务局
  • 新能源办理免税的过程需要多长时间
  • 国税局升迁难么
  • 甘肃税务局电子税务局客服电话
  • 农村信用社升级为什么
  • 煤炭限产是利好还是利空
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设