Một công cụ cho cả đăng ký và chỉnh sửa! Kỹ thuật tái sử dụng form trong React

Giới thiệu

Khi xây dựng form trong React, có phải bạn đã gặp phải khó khăn này chưa? Bạn đã kết thúc bằng việc tạo ra hai form riêng biệt cho việc đăng ký và chỉnh sửa. Tuy nhiên, bằng cách sử dụng state một cách hiệu quả, bạn có thể hợp nhất chúng thành một form duy nhất.

Giải pháp

Tạo chế độ để chuyển đổi giữa đăng ký và chỉnh sửa

const [mode, setMode] = useState<"create" | 'edit'>("create");

// "create" → Chế độ đăng ký mới
// "edit" → Chế độ chỉnh sửa

Lưu dữ liệu cần chỉnh sửa trong state

const [editing, setEditing] = useState<Record | null>(null);

Dữ liệu sẽ được chỉnh sửa được lưu ở đây và sẽ đặt thành null trong chế độ đăng ký.

Đặt "mode" và "giá trị khởi tạo" khi mở form

// Khi ở chế độ đăng ký:
const openCreate = () => {
  setMode("create");
  setEditing(null);
  reset({ title: "", time: 0 }); // Làm sạch form
  onOpen(); // Mở modal
};

// Khi ở chế độ chỉnh sửa:
const openEdit = (rec: Record) => {
  setMode("edit");
  setEditing(rec);
  reset({ title: rec.title, time: rec.time }); // Dữ liệu đã có
  onOpen();
};

Phân chia việc gửi form dựa trên chế độ

const onSubmit: SubmitHandler<Partial<Record>> = async (data) => {
  if (mode === "create") {
    // Tạo bản ghi mới
    await supabase.from("study-record").insert([
      { title: data.title, time: data.time },
    ]);
  } else if (mode === "edit" && editing) {
    // Cập nhật bản ghi hiện có
    await supabase
      .from("study-record")
      .update({ title: data.title, time: data.time })
      .eq("id", editing.id);
  }

  // Xử lý chung sau khi gửi
  reset();
  setMode("create");
  setEditing(null);
  onClose();
  fetchData();
};

Giao diện người dùng cũng có thể chuyển đổi dựa trên chế độ

<ModalHeader>
  {mode === "edit" ? "Chỉnh sửa bản ghi" : "Đăng ký mới"}
</ModalHeader>

<Button type="submit">
  {mode === "edit" ? 'Cập nhật' : "Đăng ký"}
</Button>

Các thực tiễn tốt nhất

• Sử dụng state một cách hiệu quả: Đảm bảo rằng bạn quản lý state cho cả chế độ đăng ký và chỉnh sửa một cách rõ ràng để tránh nhầm lẫn.
• Tối ưu hóa trải nghiệm người dùng: Cung cấp thông báo rõ ràng cho người dùng về chế độ hiện tại của form để họ biết họ đang thực hiện gì.

Những cạm bẫy thường gặp

• Bỏ qua việc kiểm tra dữ liệu: Đảm bảo rằng bạn đã kiểm tra dữ liệu nhập vào trước khi thực hiện thao tác gửi để tránh lỗi không cần thiết.
• Không xử lý lỗi: Hãy chắc chắn rằng bạn có các xử lý lỗi hợp lý để người dùng biết khi nào có vấn đề xảy ra.

Mẹo hiệu suất

• Chỉ cập nhật những phần cần thiết: Thay vì cập nhật toàn bộ form, hãy chỉ cập nhật phần cần thiết để cải thiện hiệu suất và trải nghiệm người dùng.
• Giảm thiểu render lại: Sử dụng memoization cho các thành phần không thay đổi để giảm thiểu số lần render lại.

Khắc phục sự cố

• Form không mở: Kiểm tra xem onOpen() có được gọi đúng cách không.
• Dữ liệu không lưu: Đảm bảo rằng bạn đã sử dụng các phương thức đúng từ Supabase và đã xử lý các lỗi có thể xảy ra.

Kết luận

Bằng cách sử dụng một state gọi là "mode", bạn có thể chuyển đổi giữa chế độ đăng ký và chỉnh sửa trong một form duy nhất. Việc sử dụng các phương thức .insert() và .update().eq(...) của Supabase cũng cho phép tích hợp cơ sở dữ liệu. Hãy thử áp dụng kỹ thuật này để cải thiện ứng dụng của bạn ngay hôm nay!

Câu hỏi thường gặp

1. Có thể sử dụng kỹ thuật này cho các form phức tạp hơn không?
   Có, bạn hoàn toàn có thể mở rộng kỹ thuật này cho các form phức tạp hơn bằng cách thêm nhiều chế độ hoặc trường dữ liệu.

2. Tôi có thể tích hợp thêm validation không?
   Có, bạn có thể dễ dàng thêm các thư viện như yup để thực hiện validation cho dữ liệu nhập vào.

3. Cách nào tốt nhất để xử lý lỗi trong quá trình gửi form?
   Bạn nên sử dụng try-catch để xử lý các lỗi có thể xảy ra và cung cấp thông báo cho người dùng về lỗi đó.