React ref

最近写博客写的有点蒙圈了,甚至在怀疑自己应不应该写下去,看看网上大神写的博客,简直了。。。!昨天给自己放了一天假,虽然离职找工作之中,也在自我督促自己学习一下!我基本写的都是最基本的内容!

好了,不多说了!继续更新!

1、React支持一种非常特殊的属性ref,你可以用来绑定到render()上,输出的任何组件上!

2、通过一个小demo练习来解析!我们要实现一个简单的功能,点击按钮,实现求和!  

<div id="container"></div>
<script type="text/babel">
var Add = React.createClass({
handleClick:function () {
//通过原生DOM的API获取input的value值
var num1 = parseInt(this.refs.input1.value);
var num2 = parseInt(this.refs.input2.value);
console.log(num1+num2)
},
render:function () {
//当组件插入到DOM后,ref 属性添加一个组件的引用于到 this.refs
return <div>
<input ref="input1" placeholder="input number"/>
<br/>
<input ref="input2" placeholder="input number"/>
<br/>
<button onClick={this.handleClick}>Click me!</button>
</div>
}
})
ReactDOM.render(
<Add/>,
document.getElementById('container')
)
</script>
首先:我们创建一个组件,返回一个div,div中放置二个input,同时设置ref属性
然后:定义一个handleClick方法,拿到input里面的值,通过控制台打印出二数之和!
最后:在button定义onClick事件!
注意:this.refs.[refName]获取真实的DOM,必须等到虚拟DOM插入文档之后,才能使用这个属性,否则是会报错的!!
在定义ref时是单数,在调用时是复数!
posted @ 2017-05-02 17:11  一纳子  阅读(1401)  评论(0编辑  收藏  举报