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

Series 7 — Web Quality – Engineering :Testing – Unit Testing, Integration Testing, Web Performance – Core Web Vitals, Code Splitting, Lazy Loading

Series 7 — Web Quality – Engineering Bài 3: Testing – Unit Testing, Integration Testing và End-to-End Testing trong ứng dụng web 1. Vì sao ứng dụng web cần Testing? Trong quá trình phát triển Frontend, chúng ta thường kiểm tra ứng dụng bằng cách chạy website trên trình duyệt, nhấn vào các nút, nhập […]

Đọc thêm

Series 7 — Web Quality – Engineering : Authentication & Authorization

Series 7 — Web Quality – Engineering Bài 1: Authentication & Authorization – Xác thực và phân quyền trong ứng dụng web 1. Mở đầu Khi xây dựng một ứng dụng web có chức năng đăng nhập, chúng ta thường nghĩ rằng chỉ cần tạo biểu mẫu nhập email, mật khẩu và kiểm tra thông […]

Đọc thêm

Series 6 – Next.js Advanced – Production: Next.js Build & Deployment

Series 6 – Next.js Advanced & Production Bài 5: Next.js Build & Deployment – Từ mã nguồn đến môi trường Production 1. Mở đầu Trong quá trình phát triển một ứng dụng web, việc chạy thành công trên máy tính cá nhân chưa có nghĩa là ứng dụng đã sẵn sàng để đưa đến người […]

Đọc thêm

Series 6 – Next.js Advanced – Production: Next.js Internationalized Routing Next.js Static Export

Series 6 – Next.js Advanced & Production   Bài 3: Next.js Internationalized Routing – Tổ chức URL cho website đa ngôn ngữ 1. Mở đầu Sau khi xây dựng cơ chế dịch nội dung và định dạng theo locale, ứng dụng cần một cách để người dùng truy cập đúng phiên bản ngôn ngữ. Ví […]

Đọc thêm

Series 6 – Next.js Advanced & Production: Metadata & SEO, Internationalization (i18n) & Localization (l10n)

Series 6 – Next.js Advanced & Production Bài 1: Metadata & SEO trong Next.js – Tối ưu thông tin và khả năng hiển thị trên công cụ tìm kiếm 1. Mở đầu Khi xây dựng một website, việc hoàn thiện giao diện và chức năng mới chỉ là một phần của quá trình phát triển. […]

Đọc thêm

Series 5 – Next.js Fundamentals: CSR, SSR, SSG, ISR và cách lựa chọn

Series 5 – Next.js Fundamentals   Bài 7 : CSR, SSR, SSG và ISR – Các chiến lược Rendering trong Next.js 1. Mở đầu Khi xây dựng một website bằng React, chúng ta thường tập trung vào việc tạo component, quản lý state và hiển thị giao diện trên trình duyệt. Tuy nhiên, khi ứng dụng […]

Đọc thêm