ReactJS

Sử dụng Component API trong reactjs

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Chào các em, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng Component API trong reactjs.

Trong bài học ngày hôm nay chúng ta sẽ giải thích React component API là gì. Mình sẽ thảo luận qua 3 phương thức setSate(), forceUpdate và ReactDOM.findDOMNode().

1. Set State

Phương thức setState() dùng để cập nhập state của các component. Dùng để thay đổi các giá trị trong state, phương thức này dùng để thêm những sự thay đổi xảy ra trong state chứ không thay thế các giá trị trong state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;

Chúng ta có một mảng data là rỗng trong state. Mỗi lần chúng ta click trên button, giá trị trong state sẽ cập nhật. Nếu chúng ta click 5 lần thì chúng ta sẽ thêm 5 giá trị “setState” vào mảng data.

reactjs

2. Force Update

Thỉnh thoảng chúng ta muốn cập nhật component thì mình sẽ sử dụng phương thức forceUpdate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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;

Chúng ta set giá trị số ngẫu nhiên sẽ được cập nhật mỗi lần nút button được click.

reactjs

3. Find Dom Node

Để thao tác với các phần tử trên website như button, text hoặc các thẻ div thì chúng ta sử dụng ReactDOM.findDOMNode().

Để sử dụng được hàm findDOMNode thì chúng ta phải import thư viện react-dom như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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;

Màu sắc của thẻ myDiv sẽ chuyển sang màu xanh mỗi lần chúng ta click vô button

reactjs

4. Video Demo

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments