Biểu mẫu có thể hoạt động

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 30 trên 47.

Trong HTML thuần, action của biểu mẫu là một URL để gửi yêu cầu POST đến. Trong Next.js, bạn có thể truyền vào đó một hàm (function):

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Khi gửi biểu mẫu, React làm ba việc thay bạn: ngăn trình duyệt gửi biểu mẫu theo cách thông thường khiến trang tải lại, thu thập các trường có tên của biểu mẫu vào một đối tượng FormData và gọi hàm xử lý của bạn với đối tượng đó.

Hãy để ý những gì không có ở đây: không có onSubmit, không có event.preventDefault(), không có trạng thái. Và trang này vẫn là một Server Component: action là dữ liệu được truyền đi, không phải trình xử lý sự kiện, nên nó dễ dàng vượt qua ranh giới.

Có một điều bạn cần chuẩn bị: mục đã được lưu, nhưng danh sách trên màn hình vẫn chưa thay đổi. Máy chủ đã dựng trang và chưa có gì yêu cầu trang tải lại. Sau hai bài học nữa, bạn sẽ sửa việc này chỉ bằng một dòng.

Thử thách

Người mới

Danh sách mua sắm có một ô nhập và một nút, nhưng chúng chưa kết nối với máy chủ. Mình đã viết sẵn action cho bạn trong app/actions.js.

Trong app/page.jsx, nhập addItem từ './actions'.
Bọc ô nhập và nút trong <form> có id="add-form".
Đặt action={addItem} cho biểu mẫu đó.

Giữ nguyên name="text" của ô nhập: action đọc trường này theo tên đó.

Tự làm thử

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục app Trang đầu tiên Ôn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhau Siêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gìBiểu mẫu có thể hoạt độngĐọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions