state

/*
* state 状态
* props
* 都是组件自身的属性
*
*
* 需求:创建一个组件CheckButton, 包含一个checkbox类型的<input>
*     复选框 在选中和未选中状态下显示不同的问题,即根据状态渲染
*
*
*
*
* */

var CheckButton = React.createClass({
    //定义初始状态
    getInitialState:function () {
        return{
            //在这个对象中设置的属性,将会存储在state中
            //默认状态,未选中
            isCheck:false
        }
    },

    //定义事件绑定的方法
    handleChange:function () {
        //修改状态值,通过this.state读取设置的状态值
        this.setState({
            isCheck: !this.state.isCheck
        });

    },
    render:function () {
        //根据状态值,设置显示的文字
        //在jsx中,不能直接使用if else判断, 使用三目运算符
        var text = this.state.isCheck?"已选中":"未选中";

        return(
                <div>
                    <input type="checkbox" onChange={this.handleChange}/>
                    {text}
                </div>
        )

    }


});

ReactDOM.render(
        <CheckButton/>,
        document.getElementById("container")
)

/*
* 当state发生变化时, 会调用组件内部的render方法
* 
* */