Series 4 – React Fundamentals

Bài 3: List Rendering, Forms và Form Handling – Hiển thị danh sách và xử lý biểu mẫu trong React

1. Mở đầu

Trong một ứng dụng thực tế, dữ liệu thường được hiển thị dưới dạng danh sách: danh sách sản phẩm, bài viết, người dùng hoặc công việc cần hoàn thành.

Bên cạnh đó, người dùng cũng cần nhập thông tin thông qua các biểu mẫu như đăng ký tài khoản, đăng nhập và tìm kiếm sản phẩm.

Trong React, ba khái niệm List Rendering, Forms và Form Handling giúp chúng ta xây dựng những chức năng này.

2. List Rendering là gì?

List Rendering là cách hiển thị một danh sách dữ liệu thành nhiều phần tử giao diện.

Ví dụ, thay vì viết thủ công từng sản phẩm, chúng ta có thể lưu dữ liệu trong một mảng và sử dụng phương thức map().

const products = [
  { id: 1, name: "Keyboard", price: 500000 },
  { id: 2, name: "Mouse", price: 250000 },
  { id: 3, name: "Monitor", price: 3000000 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} - {product.price} VNĐ
        </li>
      ))}
    </ul>
  );
}

map() duyệt qua từng phần tử của mảng và trả về một phần tử giao diện tương ứng.

Tại sao cần key?

Thuộc tính key giúp React nhận diện từng phần tử trong danh sách khi dữ liệu thay đổi.

<li key={product.id}>{product.name}</li>

Nên sử dụng một ID ổn định và duy nhất trong danh sách. Tránh dùng chỉ số mảng làm key khi danh sách có thể thêm, xóa hoặc sắp xếp lại phần tử, vì điều đó có thể khiến React nhận diện phần tử không chính xác.

3. Forms là gì?

Form là biểu mẫu giúp người dùng nhập và gửi dữ liệu. Một form có thể bao gồm:

• input: nhập văn bản, email, mật khẩu.
• textarea: nhập nội dung dài.
• select: chọn một giá trị.
• checkbox: chọn hoặc bỏ chọn.
• radio: chọn một trong nhiều phương án.
• button: gửi biểu mẫu.

Trong React, chúng ta thường sử dụng state để lưu giá trị người dùng nhập vào, đặc biệt khi cần kiểm tra dữ liệu hoặc cập nhật giao diện theo nội dung input.

4. Form Handling là gì?

Form Handling là quá trình xử lý dữ liệu biểu mẫu, bao gồm nhận dữ liệu, kiểm tra hợp lệ và thực hiện hành động khi người dùng gửi form.

Ví dụ:

import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");

  function handleSubmit(event) {
    event.preventDefault();

    if (!email.trim()) {
      alert("Vui lòng nhập email.");
      return;
    }

    alert(`Email đã nhập: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>

      <input
        id="email"
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        required
      />

      <button type="submit">Gửi</button>
    </form>
  );
}

Các điểm cần hiểu:

• value={email} liên kết giá trị input với state.
• onChange cập nhật state khi người dùng nhập.
• onSubmit xử lý khi gửi biểu mẫu.
• event.preventDefault() ngăn hành vi gửi form mặc định khiến trang tải lại.
• required yêu cầu trình duyệt kiểm tra trường nhập không được để trống.

Cách input được quản lý thông qua value và onChange này được gọi là controlled component.

5. Kết hợp danh sách và biểu mẫu

Một ứng dụng Todo List có thể sử dụng cả ba khái niệm:

import { useState } from "react";

function TodoApp() {
  const [text, setText] = useState("");
  const [todos, setTodos] = useState([]);

  function handleSubmit(event) {
    event.preventDefault();

    const value = text.trim();
    if (!value) return;

    setTodos((previous) => [
      ...previous,
      { id: crypto.randomUUID(), title: value },
    ]);

    setText("");
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={text}
          onChange={(event) => setText(event.target.value)}
          placeholder="Nhập công việc"
        />
        <button type="submit">Thêm</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

Ví dụ này minh họa việc lưu dữ liệu bằng state, xử lý biểu mẫu bằng event và hiển thị danh sách bằng map().

crypto.randomUUID() được hỗ trợ trong các môi trường trình duyệt hiện đại có ngữ cảnh bảo mật phù hợp. Trong ứng dụng thực tế, ID do backend tạo cũng là một lựa chọn phổ biến.

6. Những lưu ý quan trọng

• Không thay đổi trực tiếp mảng state bằng push(); hãy tạo mảng mới khi cập nhật.
• Mỗi phần tử trong danh sách cần key ổn định.
• Với form có nút gửi, hãy sử dụng onSubmit để xử lý việc gửi dữ liệu.
• Kiểm tra dữ liệu ở frontend giúp trải nghiệm tốt hơn, nhưng backend vẫn phải tự xác thực dữ liệu.
• Không lưu mật khẩu dạng văn bản thuần trong state lâu hơn mức cần thiết hoặc gửi dữ liệu nhạy cảm đến endpoint không an toàn.

8. Kết luận

• List Rendering chuyển dữ liệu mảng thành giao diện.
• Forms cung cấp các thành phần nhập dữ liệu.
• Form Handling xử lý dữ liệu và hành động gửi biểu mẫu.

Sau khi hoàn thành phần React Fundamentals, bước tiếp theo là tìm hiểu Hooks để quản lý state, side effects và những logic phức tạp hơn trong component.

Khoa Phan

Xem tất cả bài viết của tác giả

Bài viết khác

OpenAPI và Swagger là gì? Hướng dẫn tài liệu hóa REST API với Go và Gin-Gonic

1. OpenAPI và Swagger là gì? Khi xây dựng Backend, lập trình viên không chỉ cần triển khai API mà còn phải mô tả cách API hoạt động để những người khác có thể sử dụng và kiểm thử. Ví dụ, một ứng dụng quản lý sản phẩm cung cấp các endpoint: GET /products: lấy […]

Đọc thêm

Series 4 – React Hooks – State: Hooks, useState và useEffect

Series 4 – React Hooks – State   Bài 1 : Hooks, useState và useEffect – Quản lý dữ liệu và side effects trong React 1. React Hooks là gì? Hooks là những hàm do React cung cấp để Function Component sử dụng các khả năng như quản lý state, đồng bộ với hệ thống bên […]

Đọc thêm

Series 4 – React Fundamentals:  State, Events và Conditional Rendering

Series 4 – React Fundamentals   Bài 2: State, Events và Conditional Rendering – Cách React xử lý tương tác người dùng 1. Mở đầu Một giao diện website không chỉ hiển thị nội dung cố định. Khi người dùng nhấn nút, nhập dữ liệu, đăng nhập hoặc thêm sản phẩm vào giỏ hàng, giao diện cần […]

Đọc thêm

Series 4 — React Fundamentals : JSX, Components và Props – Ba nền tảng đầu tiên khi học React

Series 4 – React Fundamentals   Bài 1:JSX, Components và Props – Ba nền tảng đầu tiên khi học React 1. Mở đầu Khi xây dựng một website bằng HTML, CSS và JavaScript, chúng ta thường tạo cấu trúc giao diện bằng HTML, sau đó sử dụng JavaScript để xử lý dữ liệu và tương tác. […]

Đọc thêm

Series 3 – JavaScript Fundamentals: Async → API

Series 3 — JavaScript Fundamentals   JavaScript → DOM → Async → API   Bài 2. Asynchronous JavaScript & API – Xử lý bất đồng bộ và giao tiếp với Server 1. Vì sao cần Asynchronous JavaScript? Trong các website hiện đại, nhiều thao tác cần thời gian để hoàn thành, chẳng hạn như gọi API lấy […]

Đọc thêm

Transactions & ACID

1. Transaction là gì? Transaction (giao dịch) là một nhóm thao tác trên database được xem như một đơn vị xử lý logic. Mục tiêu là bảo đảm những thay đổi liên quan được thực hiện theo cách nhất quán: nếu giao dịch thành công thì các thay đổi cần thiết được xác nhận; nếu […]

Đọc thêm