发布于 2015-10-31 12:17:47 | 456 次阅读 | 评论: 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的基本用法,不要觉得简单。之后我们会在再次遇到时进行深入讲解。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务