在本章中,我們將學(xué)習(xí)React組件API。這里將討論三個(gè)方法:setState()
,forceUpdate
和ReactDOM.findDOMNode()
。 在新的ES6類中,必須手動(dòng)綁定這個(gè)。在示例中使用this.method.bind(this)
。
setState()
方法用于更新組件的狀態(tài)。 這種方法不會(huì)替代狀態(tài),而只是添加對(duì)原始狀態(tài)的更改。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;
我們從一個(gè)空的數(shù)組開始。每次點(diǎn)擊按鈕,狀態(tài)將被更新。 如果點(diǎn)擊五次,將得到以下輸出。
有時(shí)可能想要手動(dòng)更新組件。這可以使用forceUpdate()
方法來(lái)實(shí)現(xiàn)。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;
這個(gè)示例中,實(shí)現(xiàn)設(shè)置一個(gè)隨機(jī)數(shù)字,每次單擊按鈕時(shí)都會(huì)更新。
對(duì)于DOM操作,可以使用ReactDOM.findDOMNode()
方法。 首先,需要導(dǎo)入react-dom
。
文件:App.jsx -
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor() {
super();
this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
};
findDomNodeHandler() {
var myDiv = document.getElementById('myDiv');
ReactDOM.findDOMNode(myDiv).style.color = 'red';
}
render() {
return (
<div>
<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
<div id = "myDiv">這是MyDiv的內(nèi)容</div>
</div>
);
}
}
export default App;
當(dāng)點(diǎn)擊按鈕,myDiv
元素的顏色變成紅色。如下所示 -
注 - 自0.14更新以來(lái),大多數(shù)舊的組件API方法都被棄用或刪除以適應(yīng)ES6。