Cách dùng Formik để tạo biểu mẫu trong React

Formik giúp tạo biểu mẫu trong React dễ dàng hơn. Đây là cách sử dụng Formik để tạo biểu mẫu trong React.

Formik & các biểu mẫu trong React
Formik & các biểu mẫu trong React

Formik là một thư viện quản lý biểu mẫu cung cấp các thành phần và móc nối giúp tạo biểu mẫu React dễ dàng hơn. Trong bài viết này, hãy cùng Wikilaptop.com tìm hiểu nhé cách tạo biểu mẫu đăng ký trong React bằng Formik Xin vui lòng!

Tạo ứng dụng React

Sử dụng tạo-phản ứng-ứng dụng để tạo một dự án React mới:

npx create-react-app formik-form

Bây giờ điều hướng đến thư mục formik-form / src và xóa tất cả các tệp ngoại trừ App.js. Sau đó, tạo một tệp mới và đặt tên cho nó Register.js. Đây là nơi bạn thêm biểu mẫu. Nhớ nhập nó App.js.

Tạo biểu mẫu trong React

Bạn có thể tạo biểu mẫu trong Đáp ứng có hoặc không có thành phần được kiểm soát.

  • Dữ liệu biểu mẫu được tạo từ thành phần điều khiển sẽ được xử lý bởi React.
  • Dữ liệu biểu mẫu được tạo từ một phần tử không được kiểm soát do DOM xử lý.

React khuyến khích bạn sử dụng các thành phần được kiểm soát. Chúng cho phép bạn giám sát dữ liệu trong biểu mẫu trong nội bộ, vì vậy bạn có toàn quyền kiểm soát biểu mẫu.

>>> Xem thêm :  Hướng dẫn xem lịch sử chỉnh sửa tài liệu trên Google Docs

Dưới đây là ví dụ về biểu mẫu được tạo bằng thành phần được kiểm soát:

import { useState } from "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (event) => {
 event.preventDefault();
 console.log(email);
 };
 const handleEmail = (event) => {
 setemail(event.target.value);
 };
 const handlePassword = (event) => {
 setpassword(event.target.value);
 };
 return (
 <form className="register-form" onSubmit={handleSubmit}>
 <input
 id="email"
 name="email"
 type="email"
 placeholder="Your Email"
 value={email}
 onChange={handleEmail}
 />
 <input
 id="password"
 name="password"
 type="password"
 placeholder="Your password"
 value={password}
 onChange={handlePassword}
 />
 <input type="submit" value="Submit" />
 </form>
 );
};
export default Register;

Trong đoạn mã trên, bạn khởi tạo trạng thái và tạo một hàm xử lý cho mỗi trường đầu vào. Trong khi điều này hoạt động, mã của bạn có thể lặp lại và lộn xộn, đặc biệt là khi có nhiều trường đầu vào. Thêm xác nhận và xử lý thông báo lỗi là một thách thức khác.

Formik có thể làm giảm tình trạng trên. Nó làm cho việc xử lý trạng thái, xác nhận và nhập dữ liệu dễ dàng.

Thêm Formik vào React

Trước khi sử dụng hình dạngthêm nó vào dự án bằng cách sử dụng npm.

npm install formik

Để tích hợp Formik, hãy sử dụng hook useFormik. Trong Register.js, nhập useFormik ở đầu tệp:

import { useFormik } from "formik"

Bước đầu tiên là đặt các giá trị cho biểu mẫu. Trong trường hợp này, bạn sẽ khởi tạo email và mật khẩu.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 onSubmit: values => {
// handle form submission
 },
});

Bạn cũng cần thêm hàm onSubmit, hàm này lấy các giá trị và xử lý việc gửi biểu mẫu. Đối với biểu mẫu đăng ký, hành động này tạo một người dùng mới trong cơ sở dữ liệu.

>>> Xem thêm :  5 trình giả lập video game tốt nhất trên iOS

Bước tiếp theo là sử dụng đối tượng formik để nhận các giá trị hình dạng trong và ngoài trạng thái.

<form className="register-form" onSubmit={formik.handleSubmit}>
 <input
 id="email"
 name="email"
 type="email"
 placeholder="Your Email"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 <input
 id="password"
 name="password"
 type="password"
 placeholder="Your password"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 <input type="submit" value="Submit" />
</form>

Trong đoạn mã trên, bạn là:

  • Chỉ định các trường đầu vào làm giá trị TôiTên bằng giá trị được sử dụng trong quá trình khởi tạo móc nối sử dụng Formik.
  • Truy cập giá trị của một trường, sử dụng tên của nó để trích xuất nó từ formik.values.
  • Liên kết formik.handleChange với sự sắp xếp luân phiên để hiển thị các giá trị đầu vào dưới dạng kiểu người dùng.
  • Sử dụng formik.handleBlur để theo dõi các trường đã thăm.
  • Liên kết formik.handleSend với sự sắp xếp bằng cách nộp để kích hoạt chức năng onSubmit mà bạn đã thêm vào hook sử dụng Formik.

Bật xác thực biểu mẫu

Khi tạo biểu mẫu, xác thực đầu vào là rất quan trọng vì nó đảm bảo người dùng dễ dàng xác nhận và dữ liệu được lưu ở định dạng chính xác. Ví dụ, bạn có thể kiểm tra tính hợp lệ của email, mật khẩu có đủ các ký tự cần thiết …

Để xác thực biểu mẫu trong ví dụ này, hãy chọn chức năng thích hợp, chấp nhận các giá trị cho biểu mẫu và trả về một đối tượng lỗi.

Nếu chúng tôi thêm một chức năng xác thực sử dụng Formikbất kỳ lỗi xác thực nào được tìm thấy sẽ có trong Lỗi hình thức, được lập chỉ mục trên tên trường đầu vào. Ví dụ: bạn có thể thấy lỗi trường email với Formik.error.email.

>>> Xem thêm :  Tư vấn chọn mua bộ phát Wifi 4G tốt nhất hiện nay 2020

TRONG Register.jstạo chức năng xác nhận và đưa nó vào sử dụng Formik.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validate: () => {
 const errors = {};
 console.log(errors)
 if (!formik.values.email) {
 errors.email = "Required";
 } else if (
 !/^[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formik.values.email)
 ) {
 errors.email = "Invalid email address";
 }
 if (!formik.values.password) {
 errors.password = "Required";
 } else if (formik.values.password.length < 8) {
 errors.password = "Must be 8 characters or more";
 }
 return errors;
 },
 onSubmit: (values) => {
 console.log("submitted!");
 // handle submission
 },
});

Thêm xử lý lỗi

Sau đó hiển thị thông báo lỗi nếu có. Sử dụng Formik.touched để kiểm tra xem trường đã được thăm hay chưa. Điều này tránh hiển thị lỗi trong trường cho người dùng chưa được truy cập.

<form className="register-form">
 <input
 id="email"
 name="email"
 type="email"
 placeholder="Your Email"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}
 <input
 id="password"
 name="password"
 type="password"
 placeholder="Your password"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}
 <input type="submit" value="Submit" />
</form>

Xác thực dữ liệu bằng Yup

Formik cung cấp một cách dễ dàng hơn để xác nhận các biểu mẫu bằng cách sử dụng thư viện Yup. Cài đặt Yup để bắt đầu:

npm install yup

Nhập yup Register.js.

import * as Yup from "yup"

Thay vì viết hàm xác thực của riêng bạn, sử dụng Yup để kiểm tra tính hợp lệ của email và mật khẩu sẽ nhanh hơn.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Invalid email address")
 .required("Required"),
 password: Yup.string()
 .min(8, "Must be 8 characters or more")
 .required("Required")
 }),
 onSubmit: (values) => {
 console.log("submitted!");
// handle submission
 },
});

Nó được thực hiện! Bạn đã tạo một mẫu đăng ký đơn giản bằng Formik và Yup.

Trên đây là Cách đơn giản nhất để sử dụng Formik để tạo biểu mẫu trong React. Hi vọng bài viết hữu ích cho bạn!