ReactJS - API Komponen

Pada bab ini, kami akan menjelaskan API komponen React. Kami akan membahas tiga metode:setState(), forceUpdate dan ReactDOM.findDOMNode(). Di kelas ES6 baru, kita harus mengikat ini secara manual. Kami akan menggunakanthis.method.bind(this) dalam contoh.

Setel Status

setState()metode digunakan untuk memperbarui status komponen. Metode ini tidak akan menggantikan status, tetapi hanya menambahkan perubahan ke status asli.

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;

Kami mulai dengan array kosong. Setiap kali kami mengklik tombol, status akan diperbarui. Jika kita mengklik lima kali, kita akan mendapatkan output sebagai berikut.

Mengubah paksa

Terkadang kami mungkin ingin memperbarui komponen secara manual. Ini dapat dicapai dengan menggunakanforceUpdate() metode.

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;

Kami menetapkan nomor acak yang akan diperbarui setiap kali tombol diklik.

Temukan Dom Node

Untuk manipulasi DOM, kita bisa menggunakan ReactDOM.findDOMNode()metode. Pertama kita perlu mengimporreact-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;

Warna myDiv elemen berubah menjadi hijau, setelah tombol diklik.

Note - Sejak pembaruan 0.14, sebagian besar metode API komponen yang lama tidak digunakan lagi atau dihapus untuk mengakomodasi ES6.