Cách tạo một biểu mẫu phản ứng mạnh mẽ với React-Hook-Form và Material UI

Nov 06 2022
Biểu mẫu giúp một trang web thu thập dữ liệu từ những người truy cập và phần lớn thời gian, gửi nó đến một máy chủ. Hồi đó, việc phát triển một biểu mẫu khá dễ dàng.

Biểu mẫu giúp một trang web thu thập dữ liệu từ những người truy cập và phần lớn thời gian, gửi nó đến một máy chủ. Hồi đó, việc phát triển một biểu mẫu khá dễ dàng. Nhưng ngày nay, với công nghệ hiện đại và các yêu cầu phức tạp hơn, việc xây dựng hình thức trở nên khó hơn một chút.

Hành vi mặc định của các biểu mẫu HTML

Tạo một biểu mẫu, thu thập dữ liệu và gửi đến máy chủ, tương đối dễ dàng trong PHP. Tạo một biểu mẫu gửi dữ liệu đến cùng một tên đường dẫn bằng phương thức POST. Dữ liệu sau đó có thể được xác nhận và lưu trong cơ sở dữ liệu. Nếu bạn muốn thay đổi URL và phương thức HTTP, thì chỉ cần điều chỉnh thuộc tính actionmethod.

Cách phản ứng

Trong React, nó trở nên phức tạp hơn một chút vì bạn phải triển khai logic gửi của riêng mình. Điều này có nghĩa là bạn phải kéo các giá trị của các trường đầu vào và gửi yêu cầu HTTP theo cách thủ công. Các tính năng tích hợp sẵn như xác thực cũng phải do chính bạn triển khai.

Tuy nhiên, có hai cách để xử lý dữ liệu của các trường đầu vào.

Trạng thái được kiểm soát

Một cách là tạo trạng thái chứa giá trị của đầu vào và cập nhật nó thông qua trình nghe sự kiện. Bạn luôn xử lý giá trị của đầu vào. Điều này cho phép bạn kiểm soát hoàn toàn giá trị của trường đầu vào. Lợi ích của cách này là bạn có thể xây dựng một giao diện người dùng phản ứng. Điểm bất lợi là chức năng kết xuất được kích hoạt rất nhiều.

Trạng thái không kiểm soát

Cách khác là tạo một refvới useRef()hàm và chuyển nó vào refthuộc tính của phần tử đầu vào. Nếu bạn muốn truy xuất dữ liệu, bạn có thể truy xuất nó từ refby ref.current.value. Lợi ích của phương pháp này là render()phương pháp này được kích hoạt ít thường xuyên hơn. Một bất lợi lớn là bạn sẽ không được thông báo nếu giá trị của đầu vào thay đổi. Đối với điều đó, bạn phải thêm người nghe sự kiện bổ sung.

Vấn đề với các biểu mẫu trong React

Nếu bạn muốn triển khai một biểu mẫu phức tạp với xác thực và xử lý lỗi, thì khả năng rất cao là đoạn mã sẽ trở nên lộn xộn. Bạn phải sử dụng nhiều useState()hook và tạo nhiều trạng thái cho mọi giá trị đầu vào hoặc bạn phải tạo một trạng thái với một đối tượng chứa mọi giá trị (và trạng thái xác thực / lỗi) của các trường đầu vào. Đối tượng này sau đó phải được xử lý thông qua useReducerhook và một switchcâu lệnh dài.

Biểu mẫu có hai đầu vào được xây dựng với useReducer (bao gồm xác thực và xử lý lỗi)

Thư viện bên ngoài

Chúng tôi sẽ sử dụng các thư viện bên ngoài như Material UI và React Hook Form để giảm độ phức tạp của mã. Chúng sẽ làm cho mã của chúng ta dễ bảo trì và dễ đọc hơn.

Giao diện người dùng vật liệu

MUI cung cấp một bộ công cụ giao diện người dùng toàn diện để giúp bạn gửi các tính năng mới nhanh hơn
- mui.com

Material UI có nhiều thành phần biểu mẫu sẽ nâng cao trải nghiệm của nhà phát triển:

  • Trường văn bản : Cho phép người dùng nhập và chỉnh sửa văn bản
  • Chọn : Cho phép người dùng chọn một giá trị từ danh sách các tùy chọn
  • Hộp kiểm : Cho phép người dùng kiểm tra một tùy chọn

Biểu mẫu biểu diễn, linh hoạt và có thể mở rộng với xác nhận dễ sử dụng.
- react-hook-form.com

Với React Hook Form, chúng ta có thể thuê ngoài hầu hết các logic dư thừa vào thư viện và giảm độ phức tạp của mã trong codebase của riêng chúng ta. React Hook Form cung cấp chức năng tích hợp nó với Material UI.

Để kết hợp Material UI với React Hook Form, chúng ta sẽ sử dụng Controllercomponent.

Bắt đầu nào

Bạn có thể truy cập mã trên CodeSandBox tại đây .

Cài đặt

Trước khi bắt đầu, chúng ta phải cài đặt hai thư viện của mình thông qua npm hoặc sợi.

npm install @mui/material @emotion/react @emotion/styled react-hook-form
or
yarn add @mui/material @emotion/react @emotion/styled react hook-form

Tạo một thư components/core/formmục và triển khai các thành phần biểu mẫu sau.

Trương Văn bản

TextField.js

Lựa chọn

Select.js

Hộp kiểm

Xây dựng biểu mẫu với các thành phần biểu mẫu

Với các thành phần ở trên, giờ đây chúng ta có thể xây dựng biểu mẫu dễ dàng hơn.

App.js

Sự kết luận

Với việc triển khai ở trên, rõ ràng là mã sạch hơn và thân thiện hơn với nhà phát triển. Một mã sạch sẽ cải thiện khả năng bảo trì của mã và ngăn chặn nợ kỹ thuật.

Nếu bạn muốn tìm hiểu thêm về Mã sạch, hãy đọc bài đăng trên blog của tôi về Mã sạch tại đây:

Viết mã sạch + ví dụ trong TypeScript

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved