前端学习(1598):ref转发

第一种方式

<!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><!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.js"></script><script src="./node_modules/prop-types/prop-types.js"></script></head><!--  我是组件<input type="text" ref="demo" placeholder="请输入"><button onClick={this.fun}>请输入输入框的值</button> --><body><div id="demoReact"></div><script type="text/babel">class Com extends React.Component{ fun=()=>{ console.log(this.refs.demo) }; render(){ return(<div><input type="text" ref="demo" placeholder="请输入" /><button onClick={this.fun}>请输入输入框的值</button></div>) } } ReactDOM.render(<Com />,document.getElementById("demoReact"));</script></body></html>

运行结果

 

第二种方式

第三种方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP opencv Dlib,Face_Recognition

Face_Recognition使用Opencv和Dlib实现基于视频的人脸识别文件夹介绍1、Resources\pictures此文件夹下存放人脸保存结果2、Resources\video此文件夹下存放带标注视频保存结果3、Resources\faceS此文件夹下存放各个人物的图片&#xff0c;用于人脸库的建立4、Resources\featureD…

linux c截断文件

http://www.cnblogs.com/zhuxiongfeng/archive/2010/08/24/1807505.html转载于:https://www.cnblogs.com/jingzhishen/p/4745978.html

oracle dbra,资源供给:IO子系统之二

案例描述&#xff1a;某运营商的dbra备份系统&#xff0c;备份构建在vxvm和vxfs文件系统之上&#xff0c;串行更新的速度基本理想。由于无法达到更新目标&#xff0c;通过增加并行来增加IO写速度&#xff0c;结果并行度加大之后&#xff0c;iops快速下跌&#xff0c;io子系统无…

[Android]Android端ORM框架——RapidORM(v1.0)

以下内容为原创&#xff0c;欢迎转载&#xff0c;转载请注明 来自天天博客&#xff1a;http://www.cnblogs.com/tiantianbyconan/p/4748077.html Android上主流的ORM框架有很多&#xff0c;常用的有ORMLite、GreenDao等。 ORMLite&#xff1a; &#xff0d;优点&#xff1a;AP…

oracle代码实例,oracle存储过程代码实例

1、用来插入大量测试数据的存储过程CREATE OR REPLACE PROCEDURE INSERTAMOUNTTEST(ST_NUM IN NUMBER,ED_NUM IN NUMBER)ISBEGINdeclarei number;beginFOR i IN ST_NUM..ED_NUM LOOPINSERT INTO tb values(i,i,3,3,3,100,0);END LOOP;end;END;运行&…

Examining Open vSwitch Traffic Patterns

In this post, I want to provide some additional insight on how the use of Open vSwitch (OVS) affects—or doesn’t affect, in some cases—how a Linux host directs traffic through physical interfaces, OVS internal interfaces, and OVS bridges. This is somethi…

Docker 面临的安全隐患,我们该如何应对

【编者按】对比虚拟机&#xff0c;Docker 在体量等方面拥有显著的优势。然而&#xff0c;当 DevOps 享受 Docker 带来扩展性、资源利用率和弹性提升的同时&#xff0c;其所面临的安全隐患同样值得重视&#xff0c;近日 Chris Taschner 在 SEI 上撰文进行了总结。本文系 OneAPM …

oracle虑重语句,db基本语句(oracle)

一. SQL分类DDL&#xff1a;数据定义语言(Data Definition Language)DML&#xff1a;数据操纵语言(Data Manipulation Language)TCL&#xff1a;事务控制语言(Transaction Control Language)DQL&#xff1a;数据查询语言(Data Query Language)DCL&#xff1a;数据控制语言(Data…

Plist文件和字典转模型

模型与字典 1. 用模型取代字典的好处 使用字典的坏处 编译器没有自动提醒的功能,需要手敲key如果写错了编译器也不会报错2. 模型概念 概念 专门用来存放数据的对象特点 一般继承自NSObject在.h文件中声明一些用来存放数据的属性注释 //单行注释/ /多行注释/* /文档注释,调用属性…

oracle job 与存储过程,应用oracle job和存储过程

每月新增数据百万多条&#xff0c;需要定期处理2个主要数据表(test_ad,test_pd)&#xff0c;移动非当月数据到历史表中保存数据操作存储过程如下&#xff1a;MYPROC.prccreate or replace procedure MYPROC isTableName_AD char(13);TableName_PD char(13);tmp_str varchar2(10…

Oracle从小白到大牛的刷题之路(建议收藏学习)

目录 前言 数据表结构 数据库文件&#xff08;按照顺序导入&#xff09; 1基本SQL-SELECT 1.1基本SQL-SELECT语句笔记 1.2 基本SQL-SELECT语句练习 2过滤和排序数据 2.1过滤和排序数据笔记 2.2过滤和排序数据练习 3单行函数 3.1单行函数笔记 3.2单行函数练习 4多表…

oracle数据库快照打点,Oracle数据库快照的使用

Oracle数据库快照的使用正在看的ORACLE教程是:Oracle数据库快照的使用。oracle数据库的快照是一个表&#xff0c;它包含有对一个本地或远程数据库上一个或多个表或视图的查询的结果。正因为快照是一个主表的查询子集&#xff0c;使用快照可以加快数据的查询速度;在保持不同数据…

3.2 双向链表

1.简介 前面3.1的单链表在操作过程中有一个缺点&#xff0c;就是后面的节点无法直接找到前面的节点&#xff0c;这使很多操作都得从头到尾去搜寻节点&#xff0c;算法效率变得非常低&#xff0c;解决这个问题的方法就是重新定义链表的节点使每个节点有两个指针&#xff0c;一个…

uc通讯不成功php版本过高,Ucenter通信失败排查方法

定位错误来源&#xff1a;1. 使用firebug或类似于firebug的工具审查”通信失败“这几个字2. 会发现包含这几个字的div的同级下方有个script标签&#xff0c;复制该script标签的src值到浏览器的新标签页并打开3. 这个url指向的是ucenter中app模块的onping操作(ucenter/control/a…

马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别

马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别 http://martinfowler.com/articles/injection.html 中文翻译&#xff1a;http://files.cnblogs.com/files/stono/DependencyInjection.pdf 转载于:https://www.cnblogs.com/stono/p/4764551.html