zoukankan      html  css  js  c++  java
  • react实例5-事件

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test01</title>
    <script src="build/browser.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script type="text/babel">
    class Comp extends React.Component{
    constructor(...args){
    super(...args);
    this.state={value:''};
    }

    fn(ev){
    //alert('abc');
    this.setState({
    value:ev.target.value
    });
    }

    render(){
    return <div>
    <input type="text" onChange={this.fn.bind(this)}/>
    <span>{this.state.value}</span>
    </div>
    }
    }

    window.onload=function(){
    ReactDOM.render(
    <Comp/>,
    document.getElementById('app'),function(){
    console.log("渲染成功啦")
    }
    );
    }

    </script>
    </head>

    <body>
    <div id="app"></div>


    </body>
    </html>

    状态是活的,

    constructor里,this.state={}

    其他方法里,this.setState({})

    2.事件大小写

    onChange

    onClick

    3.绑定事件

    onChange=({this.fn.bind(this)})

    fn是方法,不是函数

    需要绑定

    4.用constructor,必须用super

  • 相关阅读:
    关于SQL优化(转载,格式有调整)
    开篇(我想有个家,安稳的家)
    常见兼容问题
    BFC概念及应用
    浏览器私有前缀及内核
    css3新增属性
    宽高自适应
    css布局
    css3选择器
    常用标签
  • 原文地址:https://www.cnblogs.com/codepen2010/p/6852498.html
Copyright © 2011-2022 走看看