首页 > 其他分享 >React中createRef使用

React中createRef使用

时间:2023-09-15 14:47:24浏览次数:39  
标签:current 容器 React 使用 nodeRef02 createRef nodeRef01

// ★ 最为推荐的一种创建ref的方式: createRef
class ClassicalRef extends React.Component {
    /**
     * React.createRef调用后可以返回一个容器,这个容器可以存储被ref所标识的节点
     * 该容器是专人专用的
     * */
    nodeRef01 = React.createRef();
    nodeRef02 = React.createRef();

    showData = () => {
        console.log('output-> this.nodeRef01.current.value::: ', this.nodeRef01.current)
        console.log('output-> this.nodeRef02.current.value::: ', this.nodeRef02.current)
    }

    render() {
        return (
            <div>
                <input ref={this.nodeRef01} type='text' placeholder='点击按钮提示数据'/> &nbsp;
                <br/>
                <div ref={this.nodeRef02}></div>
                <button onClick={this.showData}>display node info</button>
            </div>
        )
    }
}

标签:current,容器,React,使用,nodeRef02,createRef,nodeRef01
From: https://www.cnblogs.com/openmind-ink/p/17704972.html

相关文章

  • RTE 领域近期词云统计发布;谷歌开始新一轮「瘦身」计划;使用ChatGPT之后智力提高 50%丨R
    开发者朋友们大家好:这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。不知不觉,我们的日报已经发布了50期,作为RTE领域最垂直的日报栏目,我们的社区编辑团队会整理分享RTE(RealTimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考......
  • VScode使用git,设置了user.name和user.email,但是仍无法推送代码到仓库的解决办法
    问题写自己项目的时候,想推送一份新的上去,突然间就推送不上去,提示需要设置user.name和user.email解决使用下面的命令检查(如果没值请先设置值):##目标仓库检查(你需要在项目文件夹下打开git)gitconfiguser.namegitconfiguser.email##全局仓库检查gitconfig--globaluser.n......
  • 使用深度远程启动管理器配置BMC DHCP管理地址的方法
    1.请确保服务器BMC口或者/IDRAC口是DHCP状态,才可以使用深度工具分配地址;若BMC配置过静态地址,请使用静态地址登录;2.配置好自己笔记本的ip(例如:192.168.10.1),用网线与ipmi独立管理口直连;笔记本请务必关闭防火墙和杀毒软件;3.可自行网上下载深度远程启动管理器;下载后,打开文件夹,双......
  • 从零开始使用vue2+element搭建后台管理系统(主页)
    登录后,应有一个主页,可以展示当前用户的一些信息,例如上次登录时间地点、修改手机号、重置密码等简单功能,如图:  首先在views下新建HomeView.vue文件:<template><el-row><el-col:span="24"><!--user卡片--><el-card><divclass="user"&g......
  • Ableton如何使用 GS Wavetable 作为乐器
    GSWavetable是一种MIDI合成器,它可以在Windows系统中模拟各种乐器的声音。然而在AbletonLive中,你可能不能直接选择GSWavetable作为乐器。AbletonLive不包括对GSWavetable的直接支持,它主要针对的是VST和AU插件。如果你仍然希望使用GSWavetable的音色,你可能......
  • Nutch相关框架安装使用最佳指南(转)
    Chineseinstallingandusinginstruction - Thebestguidanceininstallingandusing NutchinChina 国内首套免费的《Nutch相关框架视频教程》        土豆在线观看地址:http://www.tudou.com/home/item_u106249539s0p1.html 超清原版下载地址: http://pan.......
  • Vue源码学习(六):(支线)渲染函数中with(),call()的使用以及一些思考
    好家伙, 昨天,在学习vue源码的过程中,看到了这个玩意嘶,看不太懂,研究一下 1.上下文这段出现vue模板编译的虚拟node部分exportfunctionrenderMixin(Vue){Vue.prototype._c=function(){//创建标签returncreateElement(...arguments)......
  • .Net使用 Tesseract 框架识别简单验证码
    1.图片验证码生成publicclassCaptchaGenerator{publicstaticstringGetRandomAuthcode(intlength){stringchkCode=string.Empty;//验证码的字符集,去掉了一些容易混淆的字符char[]character={'0',......
  • 使用VMware 16 安装银河麒麟V10 --九五小庞
    1.下载银河麒麟系统V10服务版镜像包:Kylin-Server-10-SP1-Release-Build04-20200711-x86_64.iso百度云盘链接:https://pan.baidu.com/s/1z0GCEadvefUA8R988qDP5Q提取码:1l0g2.运行VMwareWorkstation,创建新的虚拟机: 3.选中“典型”,下一步: 4.安装程序光盘映像文件(浏览——......
  • HBase|idea使用hbase进行简单的DDL增删改查
    老师要测试什么的,所以我想练习一下,顺便记录在博客里,如有错误,敬请指正,谢谢!!!idea连接hbase首先确保你可以打开Hbase http://192.168.40.100:16010查看所有表 //导入所需的类和包,包括HBase的相关类importorg.apache.hadoop.conf.Configuration;importorg.apache.hadoop.......