Giảng dậy online Reactjs

Học xây dựng table với dữ liệu động sử dụng ReactJS

January 13, 2023
josephpnc

Trong bài này, chúng ta sẽ học cách tạo bảng table, với dữ liệu động sử dụng reactjs. Chúng ta sẽ xem các thao tác lấy dữ liệu qua web service api và tạo các table row, sau đó là chức năng xoá dữ liệu kèm theo xoá row. Tất cả đều xử dụng reactjs component.

Chức năng

Chúng ta sẽ xây dựng chức năng quản lý danh sách việc cần làm (Todo List) đơn giản, tạm gọi là todo. Mỗi todo sẽ có id, name (tên việc), status (trạng thái). Trạng thái có thể là chưa xong (pending) hoặc đã xong (done).

Người sử dụng có thể tạo todo mới bằng cách nhập tên việc và trạng thái.

Danh sách các đầu việc sẽ được hiện ở dạng bảng.

Tạo reactjs component cho table <table> và row <tr>

Trong thư mục src/componentstạo file TodoTable.js với đoạn code sau:

import React, { useState } from 'react';

function TodoTableRow({ id, name, status }) {
  return (
    <tr>
      <td>{name}</td>
      <td>{status == 1 ? <span>Done</span> : <span>Pending</span>}</td>
      <td>
        <input type="hidden" value={id}/>
        <button>Delete</button>
      </td>
    </tr>
  );
}

function TodoTable({todoData}) {
  const [rows, setRows] = useState(todoData);

  function handleAddRow() {
    setRows([...rows, { name: "", status: "" }]);
  }

  function handleChange(e, index) {
    const newRows = [...rows];
    newRows[index][e.target.name] = e.target.value;
    setRows(newRows);
  }

  return (
    <div>
      <table className='table'>
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <TodoTableRow
              id={row.id}
              name={row.name}
              status={row.status}
            />
          ))}
        </tbody>
      </table>
      <button onClick={handleAddRow}>Add Row</button>
    </div>
  );
}

export default TodoTable;

 

Giao diện cho trang Todo

Tiếp theo chúng ta xây dựng giao diện cho trang Todo sử dụng reactjs cơmponent. Múc đích của trang là lấy dữ liệu từ server và gọi component TodoTable ở trên để in dữ liệu ra màn hình.

Trong thư mục src/screensthêm file TodoList.js với đoạn code dưới đây:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TodoTable from '../components/TodoTable';
import 'bootstrap/dist/css/bootstrap.min.css';
import DefaultLayout from '../layouts/DefaultLayout';

function TodoList() {
  const [todoData, setTodoData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get('http://localhost:5051/api/todo');
      setTodoData(response.data);
    }
    fetchData();
  }, []);

  return (
    <DefaultLayout title="To-do List">
      {todoData.length ? <TodoTable todoData={todoData} /> : <div> Loading... </div> }
    </DefaultLayout>
  );
}

export default TodoList;

Đoạn code này định nghĩa reactjs component TodoList, cũng là màn hình chính của chức năng quản lý todo này.

  1. useState khởi tạo một biến todoData (trong reactjs gọi là state variable) với giá trị ban đầu là một mảng rỗng.
  2. useEffect dùng axios để API tại http://localhost:5051/api/todo và cập nhật todoData với dữ liệu json trả về từ API.
  3. Trong render method return, component này sử dụng DefaultLayout component chúng ta đã xây dựng ở bài trước để hiển thị nội dung với tiêu đề là “To-do List”. Nó cũng sử dụng TodoTable component để hiển thị bảng với dữ liệu là todoData , nếu dữ liệu todoData không tồn tại, ứng dụng sẽ hiển thị thông báo ‘Loading…’.

Bạn nhớ cài đặt Laravel api, chạy backend server. Sau đó bạn có thể chạy thử ứng dụng reactjs của mình và sẽ thấy kết quả giống như màn hình dưới đây:

Học lập trình reactjs

Xem khoá học reactjs đầy đủ: https://bephongviet.com/reactjs-bai-1-khoi-dong-du-an-voi-reactjs/