state基础

发布于 2015-10-31 12:17:47 | 470 次阅读 | 评论: 0 | 来源: PHPERZ

上篇文章介绍了如何使用props属性将数据渲染到组件中，这里我们开始介绍state属性。两者的共同点就是都可以作为属性传入组件。不同的是props一般用于静态数据，定义之后数据一般不会再发生改变。 而state属性则相反。

两者的使用方法也很类似。我们通过使用getInitialState方法定义组件的初始state属性。

/*** @jsx React.DOM */
var APP = React.createClass({
    getInitialState: function() {
        return {
            txt: 'this is some text from initial state'
        }
    },
    render: function(){
        return (
            <div>
              <h1>Hello React</h1>
              <p>{this.state.txt}</p>
            </div>
        )
    }
});

React.renderComponent(<APP />, document.body)

在组件完成加载之后，我们可以通过setState方法来改变我们设置的属性的值。

首先在render函数中加入一个input元素，用于触发onChange事件，然后调用setState方法。

/*** @jsx React.DOM */
var APP = React.createClass({
    getInitialState: function() {
        return {
            txt: 'this is some text from initial state'
        }
    },
    updateTxt: function(e) {
        this.setState({txt: e.target.value})
    },
    render: function(){
        return (
            <div>
              <input type="text" onChange={this.updateTxt} />
              <p>{this.state.txt}</p>
            </div>
        )
    }
});

运行以上代码后，当我们在文本框中输入任意文本后，就会触发绑定的onChange事件，之后调用我们定义好的updateTxt方法，从而最终通过setState方法来更新state的数据。

以上为state的基本用法，不要觉得简单。之后我们会在再次遇到时进行深入讲解。