3.2. Quản lý state trong class component

1. Khởi tạo state

Sử dụng constructor để khởi tạo state trong Class Component:

class ClassName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      ...
    );
  }
}

• ClassName tên Class.

• extends React.Component phương thức kế thừa component (thực ra là kế thừa class đã tồn tại).

• constructor(props) hàm khởi tạo đối tượng cho một class, mỗi class chỉ chứa một hàm khởi tạo duy nhất.

• super(props) gọi lại constructor trong React.Component, khi này ta mới có thể sử dụng phương thức this được.

• this.state phải là một Object.

• render giống như cách dùng của props trong bài trước.

1. Cập nhật state

Sử dụng phương thức setState() để cập nhật state

this.setState({ });

• Khi setState() được gọi, React sẽ merge phần state mới với state hiện tại và tự động render lại giao diện.

• Chú ý: setState() không thay đổi state ngay lập tức, mà sẽ được React xử lý bất đồng bộ.

1. Ví dụ

Tạo một class component có tên là Counter có state là số lượng đếm (count) và cập nhật nó khi nhấn click vào button "Click me"

Giao diện ví dụ

import React from 'react';
class Counter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
    }

    handleClickMe = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <>
                <p>Bạn đã click {this.state.count} lần</p>
                <button onClick={this.handleClickMe}>Click me !</button>
            </>
        )
    }
}

export default Counter;