Tue, Jul 12, 2022
Read in 3 minutes
Tạo bài đăng chắc hẳn là một tính năng then chốt trong bất kì ứng dụng thương mại điện tử nào. App Bán Lại được truyền cảm hứng từng nhiều app như vậy. Trong bài viết này chúng mình sẽ hướng dẫn cho các bạn những thành phần cấu thành nên màn hình tạo bài đăng.
Trong phần điền thông tin chi tiết, Bán Lại có sử dụng những component riêng với những tính năng đặc biệt như đưa ra gợi ý giúp người dùng có thể điền thông tin đúng hơn, từ đó giúp việc validate form dễ dàng hơn. Đây là một vài ví dụ:
Chúng ta đều nhận thấy được sự phức tạp và khó khăn mà chúng ta có thể gặp phải khi làm việc với form. Chúng ta phải xử lý các form dài dòng, validate, quản lý state của form và các component bên trong nó. Trong mini program Bán Lại, React-hook-form được sử dụng để xác thực form. React-hook-form là một thư viện giúp bạn xác thực các form trong React, là một thư viện tối thiểu không có bất kỳ phụ thuộc nào khác. Nó rất tiện và dễ sử dụng, yêu cầu các developer code ít hơn các thư viện khác. Một tính năng tuyệt vời khác được cung cấp bởi React Hook Form là tích hợp dễ dàng với các thư viện UI, vì hầu hết các thư viện đều hỗ trợ ref.
Bạn có thể truy cập vào link này để tham khảo document về cách xác thực một form sử dụng React Form Hook.
Khi người đăng bài, họ có thể sẽ muốn thay đổi một vài chi tiết trong bài đăng đó. Để tiết kiệm thời gian lập trình, ta có thể tận dụng trang tạo bài đăng làm trang chỉnh sửa chi tiết bài đăng. Hai trang này có thể được phân biệt với nhau bằng một thuộc tính trong query của url trang.
Ở phần tạo bài đăng, Bán Lại đã sử dụng React Hook Form để xác thực form vì những sự tiện lợi của nó mang lại. Một tính năng tuyệt vời khác của React Hook Form là reset, giúp fill data vào những component nhập thông tin.
Trong Bán Lại, đầu tiên khi người bán muốn sửa chi tiết một bài đăng nào đó, API lấy chi tiết bài đăng sẽ được gọi và lưu chi tiết đó vào một state trong store. form sẽ lấy data từ state này và fill vào các component dùng để nhập thông tin.