Bài 7: ReactJJS - Component API

Trong bài hôm nay, ta sẽ cùng tìm hiểu về React component API. Mình sẽ bàn luận về 3 phương thức chính : setState(), forceUpdate và ReactDOM.findDOMNode(). Trong bản ES6, ta sử dụng this.method.bind(this)

1. Set State :

Phương thức setState() được sử dụng để cập nhật lại trạng thái cho component. Nó không có nghĩa là thay thế trạng thái, chỉ là thay đổi trạng thái ban đầu . Để rõ hơn bạn hãy xem đoạn code dưới đây :

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;

Ta tạo với mảng mới có tên là data rỗng. Cứ mỗi lần ta nhấn vào nút Set State thì trạng thái sẽ được cập nhật. Nếu ta click 5 lần thì sẽ được kết quả như sau :

2. Force Update(Bắt buộc cập nhật) :

Đôi lúc ta có thể muốn tự cập nhật trạng thái theo cách thủ công, để làm được điều này ta sẽ sử dụng phương thức 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;

ở đây mình tạo một con số ngẫu nhiên và nó sẽ cập nhật lại số khác khi mình nhấp vào nút FORCE UPDATE như kết quả dưới đây :

3. Find Dom Node :

Đối với DOM, ta sẽ sử dụng cú pháp ReactDOM.findDOMNode(). Ta cần phải import thư viện 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;

Màu của thẻ myDiv sẽ chuyển sang xanh mỗi khi ta nhấn vào nút FIND DOM NODE trên màn hình, kết quả như sau :