文档章节

reactJS -- 9 组件的Refs(操作DOM的两种方法)

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/03 20:03
字数 237
阅读 13
收藏 0

一.概述

https://react-cn.github.io/react/docs/more-about-refs.html

组件的Refs用来获取原生的HTML节点 

二.操作DOM

1. ReactDOM.findDOMNode()

  <input id= "submitButton" type= "button" value="submit" 

onClick={this.changerUserInfo.bind(this, 99)}/>

点击按钮后 ,按钮字体变红 使用findDOMNode 操作

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    //第一种方式
    var mySubmitButton = document.getElementById('submitButton');
    ReactDOM.findDOMNode(mySubmitButton).style.color = 'red';
    console.log('a');

  }

2.定义Refs

给input 增加  ref = ''''  属性

<input id="submitButton" ref="submitButton"  type= "button" value="submit" onClick=

{this.changerUserInfo.bind(this, 99)}/>

this.refs.submitButton 获取input对象

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);

  }
// ==> <input type= "button" id = "submitButton" value= submit/>

操作

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);
    this.refs.submitButton.style.color = "red";

  }

这种方式更加好

  1. Refs 是访问到组件内部DOM 节点唯一可靠的方法
  2. Refs会自动销毁对子组件的引用
  3. 不要在render 或 render  之前对 Refs 进行调用。要在事件内进行调用,不能再构造函数中调用。
  4. 不要多用,更多运用 state

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
2018/06/20
0
0
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
React 与 Domcom 面对面 -- domcom 好在哪里?

在John Resig设计的jQuery独霸前端javascript多年之后,Google推出的重量级AngularJS给前端开发带来巨大的观念变化,给人耳目一新之感,同时也推动前端的观念、技术和框架领域进入快速迭代,...

局长
2016/08/27
2.8K
22
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
0
0
【React教学】通用型DataTable组件——400行内

其实严格意义来说,应该将Pagination(分页处理)和数据加载(AjaxLoad)作为一个独立的组件来处理,不过为了方便展示,就一股脑都做在这个Table里面了。 目前只实现到整个Table的数据加载,...

曾建凯
2016/05/20
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Guava RateLimiter + AOP注解实现单机限流、统计QPS

1、基于springboot项目pom.xml添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></dependency><d......

铁骨铮铮
36分钟前
3
0
龙芯版办公软件下载

金山wps office   rpm包:http://ftp.loongnix.org/os/loongnix/1.0/os/Packages/w/wps-office-10.8.0.6472-1.a20p1.mips64el.rpm   deb包:http://packages.deepin.com/loongson/pool/......

gugudu
41分钟前
2
0
BI报表分析和数据可视化,推荐这三个开源工具!

开源篇 一、Superset 1、技术架构:Python + Flask + React + Redux + SQLAlchemy 2、使用人群: (1)开发/分析人员做好看板,业务人员浏览看板数据 (2)业务人员可自行编辑图表,查看满足...

飓风2000
48分钟前
3
0
CountDownLatch

CountDownLatch的概念 CountDownLatch是一个同步工具类,用来协调多个线程之间的同步,或者说起到线程之间的通信(而不是用作互斥的作用)。 CountDownLatch能够使一个线程在等待另外一些线程...

少年已不再年少
57分钟前
2
0
centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部