zoukankan      html  css  js  c++  java
  • 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时是单数,在调用时是复数!
  • 相关阅读:
    课程作业02
    课后作业01
    大道至简第一章伪代码
    《大道至简》读后感
    Codeforces 959 F. Mahmoud and Ehab and yet another xor task
    Codeforces 992 E. Nastya and King-Shamans
    Codeforces 835 F. Roads in the Kingdom
    Codeforces 980 D. Perfect Groups
    洛谷 P4315 月下“毛景树”
    JDOJ 1234: VIJOS-P1052 高斯消元
  • 原文地址:https://www.cnblogs.com/copper6/p/6797086.html
Copyright © 2011-2022 走看看