zoukankan      html  css  js  c++  java
  • React State(状态)

    React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

    React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

    以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>react state</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          // 创建LikeButton组件
          var LikeButton = React.createClass({
            // 定义初始状态
            getInitialState: function() {
              return {liked: false}; // 这个对象可以通过this.state属性读取
            },
            // 点击事件
            handleClick: function(event) {
              // 更改状态值
              this.setState({liked: !this.state.liked});
            },
            // 渲染
            render: function() {
              var text = this.state.liked ? '喜欢' : '不喜欢';
              return (
                <p onClick={this.handleClick}>
                  你<b>{text}</b>我。点我切换状态。
                </p>
              )
            }
          });
    
          // 调用
          ReactDOM.render(
            <LikeButton />,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>

    .

  • 相关阅读:
    H5页面引用百度地图绘制车辆历史轨迹
    js 银行卡号校验
    PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
    js 识别二维码
    js 生成二维码
    apicloud APP沉浸式状态栏设置
    微信公众号页面video标签播放视频兼容问题
    EasyUI 导出数据表格 (Export DataGrid)
    c#部署程式到服務器插入數據到oracleDB亂碼
    asp.net JS使用MVC下載(導出Excel)
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8443301.html
Copyright © 2011-2022 走看看