react中操作dom的方法之---refs

自学react也那么久了，因为是自学嘛，当然很多坑，特别是react中如何操控DOM这一方面，就很头大，因为react生成的是虚拟的DOM，是无法直接操作的，在网上也查找了很多这方面的知识，但就是没能领悟，今天在做一个demo的时候，无意间就发现了，真的是醍醐灌顶的感觉啊。

大神请忽略此文

-------------------------------------------------------------我是分割线----------------------------------------------------------------------

在react中

可以使用refs进行操控DOM

React提供了一个打破限制的办法，这就是refs。refs（reference,引用）在以下时候特别有用：当你需要直接操作一个组件渲染的DOM标记（譬如要调整它的绝对位置），或者在一个大型的非React应用中使用一个React组件，或者是把你已有的代码库在React中复用

ref字符串属性（注：这种方法已经过时了...日后更新此文再写其他的方法，不过这个是仅献给新人的，过时不代表不能用啊）

1. 给任何render函数渲染的东西增加ref属性，例如：

<input ref="myInput" />

2. 在其它的地方（通常是事件处理代码里），通过this.refs访问真正的组件实例。

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();




上图

在程序中的一个div里加上ref属性




在需要引用的地方调用（这里我特意console了一下，就是想看一下他会出什么），此处我是需要得到上面的那个div并给他加一个监听




这个就是在谷歌浏览器里console出来的




可以看见他确实把我们想要操控的DOM给拿到手了