zoukankan      html  css  js  c++  java
  • 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方法
  • 相关阅读:
    RabbitMQ教程
    设置文件夹共享及所有访问权限
    一键操作IIS
    C#操作IIS服务
    【01】浅谈HTTP在WebApi开发中的运用
    Socket通信原理
    C# 通过JObject解析json对象
    MVC小知识整理
    Global.asax文件的作用
    iOS开发日记9-终端命令
  • 原文地址:https://www.cnblogs.com/chebaodaren/p/6430463.html
Copyright © 2011-2022 走看看