ReactNative--state

事件处理

React中的事件名称,组件中包含一个button,给button绑定onClick事件

定义一个组件:button 给button绑定onClick事件

    var MyButton = React.createClass({
      handleClick:function () {
        alert("点击按钮触发的效果");
      },
      render:function () {
        return(
          <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
        );
      }
    });

    ReactDOM.render(
      <MyButton buttonTitle="button"/>,
      document.getElementById("container")
    );

state 状态

props 组件自身的属性

    var CheckButton = React.createClass({
      getInitialState:function () {
        return{
          isCheck:false
        }
      },
      handleChange:function () {
        this.setState({
          isCheck:!this.state.isCheck
        });
      },
      render:function () {
        //在jsx语法中,不能直接使用if,使用三目运算符
        var text = this.state.isCheck ? "yes" : "no";
        return(
          <div>
            <input type="checkbox" onChange={this.handleChange} />
            {text}
          </div>
        );
      }
    });

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

//当state发生变化时,会调用组件内部的render方法
原文地址:https://www.cnblogs.com/chebaodaren/p/6430463.html