zoukankan      html  css  js  c++  java
  • react state

    功能1: 负责数据管理
    3个基础操作:
    ①初始化
    getInitialState:function(){
    return {count:0,price:100}
    }
    ②读
    this.state.count
    ③写
    this.setState({count:2})
    this.setState({count:2},()=>{
    //状态在写操作成功之后,会执行的处理函数
    })
    注意事项:
    如果一个组件中 有多个状态,在处理状态的写操作时,需要更新哪个状态直接设置,其它的默认保持不变

    功能2: 状态的数据具有绑定的效果
    一旦将状态的数据给视图使用,当状态发生变化时,视图也会跟着自动更新
    <script type='text/babel'>
         var MyComponent = React.createClass({
           // 组件内部数据的初始化
           getInitialState:function(){
             return {count:0,price:50}
           },
           handleClick:function(){
             //修改状态的值
              var nowCount = this.state.count;
              var priceNum = this.state.price;
              nowCount++;
              priceNum--;
              this.setState({count:nowCount,price:priceNum},()=>{
                console.log(this.state.count);
              });
                       
           },
           render:function(){
             return <div>
               <p>{this.state.count}</p>
               <p>{this.state.price}</p>
               <button onClick={this.handleClick}>clickMe</button>
             </div>
           }
         })
    
         ReactDOM.render(
           <MyComponent></MyComponent>,
           document.getElementById('example')
         )
      </script>
  • 相关阅读:
    nginx学习1
    win7右下角的网络连接图标不见了~终极必杀技
    centos配置history记录每个用户执行过的命令
    Screen会话命令 Linux
    Linux的运行级别和chkconfig用法
    Linux与Windows中的UTC时间
    Solr 缓存配置
    SolrJ 查询数据
    Solr之困
    solr 查询参数说明
  • 原文地址:https://www.cnblogs.com/iamlhr/p/10906330.html
Copyright © 2011-2022 走看看