[React] React Fundamentals: State Basics

最新推荐文章于 2020-09-14 08:46:07 发布

weixin_30401605

最新推荐文章于 2020-09-14 08:46:07 发布

阅读量45

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/4361631.html

版权

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>

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

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

转载于:https://www.cnblogs.com/Answer1215/p/4361631.html

weixin_30401605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[React] React Fundamentals: State Basics

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

扫一扫