Reactjs-component-api

ReactJS-コンポーネントAPI

この章では、ReactコンポーネントAPIについて説明します。 setState（）、forceUpdate 、および* ReactDOM.findDOMNode（）の3つのメソッドについて説明します。 新しいES6クラスでは、これを手動でバインドする必要があります。 例では this.method.bind（this）*を使用します。

状態を設定

• setState（）*メソッドは、コンポーネントの状態を更新するために使用されます。 このメソッドは状態を置き換えませんが、元の状態に変更を追加するだけです。

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;

空の配列から始めました。 ボタンをクリックするたびに、状態が更新されます。 5回クリックすると、次の出力が得られます。

React Component API Set State

アップデートさせる

コンポーネントを手動で更新したい場合があります。 これは、* forceUpdate（）*メソッドを使用して実現できます。

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;

ボタンがクリックされるたびに更新される乱数を設定しています。

React Component API Force Update

Domノードを検索

DOM操作には、* ReactDOM.findDOMNode（）メソッドを使用できます。 最初に *react-dom をインポートする必要があります。

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 = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

ボタンをクリックすると、 myDiv 要素の色が緑に変わります。

React Component API Find Dom Node

注-0.14アップデート以降、古いコンポーネントAPIメソッドのほとんどは、ES6に対応するために非推奨または削除されました。