Đối với những sàn thương mại điện tử, để đưa một sản phẩm lên sàn giúp người dùng có thể xem và lựa chọn thì việc tạo bài đăng về sản phẩm đó là một việc không thể thiếu. Ở Bán Lại, khi muốn tạo tin đăng một sản phẩm, người đăng bài cần cung cấp đầy đủ những thông tin chi tiết về sản phẩm cần được rao bán. Quy trình tạo bài đăng ở Bán Lại được chia làm 3 bước.
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.
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 Hook Form.
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.