ReactJS元件API

在本章中，我們將學習React元件API。這裡將討論三個方法：setState()，forceUpdate和ReactDOM.findDOMNode()。 在新的ES6類中，必須手動系結這個。在範例中使用this.method.bind(this)。

設定狀態

setState()方法用於更新元件的狀態。 這種方法不會替代狀態，而只是新增對原始狀態的更改。

檔案：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;

我們從一個空的陣列開始。每次點選按鈕，狀態將被更新。 如果點選五次，將得到以下輸出。

強制更新

有時可能想要手動更新元件。這可以使用forceUpdate()方法來實現。

檔案：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;

這個範例中，實現設定一個亂數字，每次單擊按鈕時都會更新。

查詢Dom節點

對於DOM操作，可以使用ReactDOM.findDOMNode()方法。 首先，需要匯入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的內容</div>
         </div>
      );
   }
}
export default App;

當點選按鈕，myDiv元素的顏色變成紅色。如下所示 -

註 - 自0.14更新以來，大多數舊的元件API方法都被棄用或刪除以適應ES6。