zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: State Basics

    State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

    Properties vs. State

    When you think of properties, you should be thinking of component initialisation. When you think of state, you should think of an internal data-set which affects the rendering of components.

    Setting Initial State:

    This is done by defining a method called getInitialState() and returning an object.

    Setting State:

    Setting state should only be done from inside the component. As mentioned, state should be treated as private data, but there are times when you may need to update it. setState()

    Replacing State:

    It’s also possible to replace values in the state by using the replaceState()method.

    /**
     * @jsx React.DOM
     */
      
    var InterfaceComponent = React.createClass({
      getInitialState : function() {
        return {
          first : "chris",
          last  : "pitt"
        };
      },
      handleClick : function() {
        this.replaceState({
          first : "bob"
        });
      },
      render : function() {
        return <div onClick={this.handleClick}>
          hello { this.state.first + " " + this.state.last }
        </div>;
      }
    });
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React Lesson 3: state</title>
    </head>
    <body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    
        var React_app = React.createClass({
            getInitialState: function() {
                return {
                    name: "Joe"
                }
            },
            myUpdate: function(e){
                this.replaceState({name: e.target.value});
            },
            render: function() {
                return (
                     <div>
                        Your name: <input type="text" onChange={this.myUpdate}/>
                        <h1>{this.state.name}</h1>
                     </div>
                );
            }
        });
    
        React.render(<React_app />, document.body);
    </script>
    </body>
    </html>

    More: 

    https://medium.com/react-tutorials/react-state-14a6d4f736f5

    https://egghead.io/lessons/react-state-basics

  • 相关阅读:
    P4559 [JSOI2018]列队
    2019.2.14 考试T3 交互题
    2019.2.14 考试T1 FFT
    P3240 [HNOI2015]实验比较 树形DP
    bzoj 3514: Codechef MARCH14 GERALD07加强版 LCT+主席树
    P4172 [WC2006]水管局长 LCT维护最小生成树
    P4177 [CEOI2008]order 最小割
    CF1073G Yet Another LCP Problem SA+权值线段树
    CF1110D Jongmah
    2019.2.10考试T2, 多项式求exp+生成函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4361631.html
Copyright © 2011-2022 走看看