組件中包括state，props與render成員函數(shù)。

react中，主要通過(guò)定義state，根據(jù)不同state渲染對(duì)應(yīng)用戶界面。

過(guò)程調(diào)用了成員函數(shù)setState（data，callback）。這個(gè)函數(shù)會(huì)合并data到this.state，并重新渲染組件。渲染完成之后調(diào)用可選的callback回調(diào)。多數(shù)情況下react負(fù)責(zé)視圖更新。

舉個(gè)例子：

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狀態(tài) </button>

　　　　　　</p>

　　　　);

　　}

});

ReactDOM.render(

　　<TextBoxComponent />,

　　document.getElementById(''reactContainer'')

);

過(guò)程中，組件最初有個(gè)初始狀態(tài)，通過(guò)調(diào)用方法getInitialState獲取，這個(gè)方法在組件初始化的時(shí)候執(zhí)行，返回一個(gè)對(duì)象或者null。getInitialState返回的對(duì)象會(huì)自動(dòng)合并到this.state上，可以通過(guò)”this.state.屬性名”的方式來(lái)訪問(wèn)屬性。

這里將enable這個(gè)值和input的disable綁定，當(dāng)要修改這個(gè)屬性時(shí)，要使用setState方法。聲明handClick方法，來(lái)綁定button上面，實(shí)現(xiàn)state.enable的值。

當(dāng)用戶單擊導(dǎo)致?tīng)顟B(tài)變化時(shí)，this.setState方法修改了狀態(tài)值，每次修改后，this.render會(huì)被自動(dòng)調(diào)用，從而自動(dòng)渲染視圖。

?

1.getInitialState函數(shù)必須有返回值，可以是null、false、一個(gè)對(duì)象。

2.訪問(wèn)state數(shù)據(jù)的方法是“this.state.屬性名”。

3.變量用{}包裹，不需要再加雙引號(hào)。

轉(zhuǎn)載于:https://www.cnblogs.com/omiturix/p/10787778.html

總結(jié)

以上是生活随笔為你收集整理的react state成员的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。