首页 > 其他 > 详细

ReactNative--state

时间:2017-02-22 19:50:13      阅读:230      评论:0      收藏:0      [点我收藏+]

事件处理

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方法

 

ReactNative--state

原文:http://www.cnblogs.com/chebaodaren/p/6430463.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!