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时是单数,在调用时是复数!
  • 相关阅读:
    线程基础1
    组合数学的卡特兰数 TOJ 3551: Game of Connections
    2017ACM/ICPC广西邀请赛-重现赛(感谢广西大学)
    Codeforces Round #430 (Div. 2)
    线代之高斯消元
    牛客网Wannafly模拟赛
    TOJ3039: 材质贴图
    AtCoder Grand Contest 019
    TOJ 3974: Region n条直线m个圆最多将圆分为几个区域
    AIM Tech Round 4 (Div. 2)
  • 原文地址:https://www.cnblogs.com/copper6/p/6797086.html
Copyright © 2011-2022 走看看