study
/
react
/
38th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <title>react-事件,state</title>
    <script>
        /**


        react 绑定事件
            1.官方推荐
                驼峰命名 onClick,onKeyDown等
                必须在构造函数中实现进行绑定声明
            2.简单方式
                直接在元素上onClick={this.simpleClick.bind(this)}
            3.箭头函数
                直接元素上添加：(e)=>this.jtClick(e)

        补充内容
            state   主要作用于组件数据处理，他是组件的私有属性，只能组件内部修改，外部不可访问和修改
                    若在组件内部修改state会导致组件重新渲染
            props
            super   子类调用父类的构造函数

        */
    </script>

    <script type="text/babel">

        //function 形式组件
        function Num(props) {
            return <p>{props.myNum}</p>
        }

        //ES6方式组件
        class Num2 extends React.Component{
            render(){
                return <p>{this.props.myNum}</p>
            }
        }

        class Hello extends React.Component{

            /***过时的写法*/
            // getInitialState(){
            //     return{
            //         name:'jack';
            //     }
            // }

            /**ES6的写法：构造函数
                只能在构造函数中初始化state
            */
            constructor(){
                super();
                this.state = {
                    name:'hanley',
                    flag:true,
                    num:0
                }
                this.change=this.handleClick.bind(this);
            }

            handleClick(){
                alert("官方推荐绑定");
            }

            simpleClick(){
                alert("简单绑定");
            }

            jtClick(){
                alert("箭头函数绑定");
            }

            //修改state，通过setState
            demoClick(){
                this.setState({
                    flag:!this.state.flag
                });
                console.log('democlick,falg='+this.state.flag);

            }


            add(){
                this.setState({
                    num:this.state.num+1
                });
            }


            render(){
                return (
                    <div>
                        <button onClick={this.change}>官方推荐事件绑定</button>
                        <button onClick={this.simpleClick.bind(this)}>简单绑定</button>
                        <button onClick={(e)=>this.jtClick(e)}>箭头函数绑定</button>
                        <hr/>
                        <button onClick={(e)=>this.demoClick(e)}>
                            {this.state.flag ? 'show':'hidden'}
                        </button>
                        <hr/>
                        <button onClick={()=>this.add()}>num+1</button>
                        <p>{this.state.num}</p>
                        <hr/>
                        <Num myNum={this.state.num}></Num>
                        <Num2 myNum={this.state.num}></Num2>
                    </div>
                )
            }
        };

        ReactDOM.render(
            <Hello/>
            ,
            document.getElementById('my')
        )

    </script>

</head>
<body>
    <div id="my"></div>
</body>
</html>