react state成员

组件中包括state，props与render成员函数。

react中，主要通过定义state，根据不同state渲染对应用户界面。

过程调用了成员函数setState（data，callback）。这个函数会合并data到this.state，并重新渲染组件。渲染完成之后调用可选的callback回调。多数情况下react负责视图更新。

举个例子：

var TextBoxComponent = React.createClass({

　　getInitialState:()=>{

　　　　return { enable:false};

　　},

　　handClick:()=>{

　　　　this.setState({enable:!this.state.enable})

　　},

　　render(){

　　　　return (

　　　　　　<p>

　　　　　　　<input type="text" disabled={this.state.enable} />

　　　　　　　<button onClick={this.handClick}> 改变textbook状态 </button>

　　　　　　</p>

　　　　);

　　}

});

ReactDOM.render(

　　<TextBoxComponent />,

　　document.getElementById(''reactContainer'')

);

过程中，组件最初有个初始状态，通过调用方法getInitialState获取，这个方法在组件初始化的时候执行，返回一个对象或者null。getInitialState返回的对象会自动合并到this.state上，可以通过”this.state.属性名”的方式来访问属性。

这里将enable这个值和input的disable绑定，当要修改这个属性时，要使用setState方法。声明handClick方法，来绑定button上面，实现state.enable的值。

当用户单击导致状态变化时，this.setState方法修改了状态值，每次修改后，this.render会被自动调用，从而自动渲染视图。

 

1.getInitialState函数必须有返回值，可以是null、false、一个对象。

2.访问state数据的方法是“this.state.属性名”。

3.变量用{}包裹，不需要再加双引号。

转载于:https://www.cnblogs.com/omiturix/p/10787778.html