Reactjs - State

04/01/2022 React

Reactjs - State

Reactjs - Components

React components có một đối tượng state được tích hợp sẵn

Đối tượng state là nơi bạn lưu trữ các giá trị thuộc tính thuộc về component.

Khi đối tượng state thay đổi, component sẽ hiển thị lại. (render lại)

1. Tạo state object

Chỉ định đối tượng state trong hàm contructor

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

- đối tượng state có thể chứa nhiều thuộc tính

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

2. Cách sử dụng đối tượng state

Tham chiếu đối tượng state ở vị trị bất kỳ trong component bằng cú pháp: this.state.propertyname.

VD tham chiếu đối tượng state trong hàm render

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

3. Thay đổi giá trị thuộc tính trong state object

- Để thay đổi giá trị của state Sử dụng phương thức: this.setState()

- Khi state object thay đổi thì component sẽ render lại, tức là sẽ hiển thị lại theo giá trị mới.

VD: thêm buttion với lệnh onClick event sẽ thay đổi giá trị color

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

* Lưu ý: Luôn sử dụng phương thức setState () để thay đổi đối tượng stage, nó sẽ đảm bảo rằng component biết nó đã được cập nhật và gọi phương thức render () (và tất cả các phương thức vòng đời khác).

Cám ơn

TƯ VẤN MIỄN PHÍ

XÂY DỰNG ỨNG DỤNG & WEBSITE

Nhóm hữu ích Việc làm IT Lập trình viên Kiến thức CNTT Học Code

Bài viết cùng chủ đề

Reactjs - Giới thiệu, cài đặt

Reactjs - tìm hiểu React JSX

Reactjs - render HMTL

Reactjs - Components

Reactjs - Cài đặt dự án đầu tiên

Reactjs - sử dụng CSS & Sass

Reactjs - thư viện UI Components tốt nhất cho ReactJS

Reactjs - Sử dụng thư viện react-redux