Cách sử dụng Formik để tạo 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 để dễ dàng quá trình tạo biểu mẫu React. Formik chăm sóc các trạng thái biểu mẫu, xác thực và trình xử lý lỗi cho bạn, giúp bạn dễ dàng thu thập và lưu trữ dữ liệu người dùng.
Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu đăng ký trong React bằng Formik. Để làm theo, bạn sẽ cảm thấy thoải mái khi làm việc với React hook.
Mục Lục
Tạo ứng dụng React
Sử dụng ứng dụng create-react để tạo một dự án React mới:
npx create-react-app formik-form
Bây giờ, điều hướng đến formik-form / src thư mục và xóa tất cả các tệp ngoại trừ App.js.
Tiếp theo, tạo một tệp mới và đặt tên cho nó Register.js. Đây là nơi bạn sẽ thêm biểu mẫu của mình. Nhớ nhập nó vào App.js.
Tạo biểu mẫu phản ứng
Bạn có thể tạo biểu mẫu React bằng cách sử dụng các thành phần được kiểm soát hoặc các thành phần không được kiểm soát. Thành phần được kiểm soát là thành phần có dữ liệu biểu mẫu được xử lý bởi chính React. Thành phần không được kiểm soát là thành phần có dữ liệu biểu mẫu được xử lý bởi DOM.
Các tài liệu React chính thức khuyên bạn nên sử dụng các thành phần được kiểm soát. Chúng cho phép bạn theo dõi dữ liệu biểu mẫu ở trạng thái cục bộ và do đó có toàn quyền kiểm soát biểu mẫu.
Dưới đây là một ví dụ về biểu mẫu được tạo bằng cách sử dụng một 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 đang 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ể dễ dàng lặp lại và lộn xộn, đặc biệt là với nhiều trường đầu vào. Thêm xác thực và xử lý thông báo lỗi là một thách thức khác.
Formik nhằm mục đích giảm những vấn đề này. Nó giúp dễ dàng xử lý trạng thái biểu mẫu, xác thực và gửi dữ liệu biểu mẫu.
Thêm Formik vào React
Trước khi sử dụng formikthêm nó vào dự án của bạn bằng cách sử dụng npm.
npm install formik
Để tích hợp Formik, bạn sẽ sử dụng useFormik cái móc. Ở trong Register.jsnhập useFormik ở đầu tệp:
import { useFormik } from "formik"
Bước đầu tiên là khởi tạo các giá trị 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 đang thêm chức năng onSubmit để nhận các giá trị biểu mẫu và xử lý việc gửi biểu mẫu. Đối với một biểu mẫu đăng ký như thế này, điều này có nghĩa là tạo một người dùng mới trong cơ sở dữ liệu.
Bước tiếp theo là sử dụng formik đối tượng để nhận các giá trị biểu mẫu 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à:
- Cung cấp cho các trường đầu vào một Tôi và Tên giá trị bằng giá trị được sử dụng trong quá trình khởi tạo trong useFormik cái móc.
- Truy cập giá trị của một trường, sử dụng tên của nó để truy xuất nó từ formik.values.
- Ràng buộc formik.handleChange vào sự kiện onChange để hiển thị các giá trị đầu vào khi người dùng nhập.
- Sử dụng formik.handleBlur để theo dõi các lĩnh vực đã truy cập.
- Ràng buộc formik.handleSubmit đến onSubmit sự kiện để kích hoạt onSubmit chức năng bạn đã thêm vào useFormik cái móc.
Bật xác thực biểu mẫu
Khi tạo biểu mẫu, điều quan trọng là phải xác thực thông tin đầu vào của người dùng vì nó giúp xác thực người dùng dễ dàng vì bạn chỉ lưu trữ dữ liệu ở định dạng đúng. Ví dụ: trong biểu mẫu của bạn, bạn có thể kiểm tra xem email được cung cấp có hợp lệ không và mật khẩu có nhiều hơn 8 ký tự hay không.
Để xác thực biểu mẫu, hãy xác định một hàm xác thực chấp nhận các giá trị biểu mẫu và trả về một đối tượng lỗi.
Nếu bạn thêm chức năng xác thực vào useFormikbất kỳ lỗi xác thực nào được tìm thấy sẽ có sẵn trong Formik.errors, được lập chỉ mục trên tên đầu vào. Ví dụ: bạn có thể truy cập vào một lỗi về trường email bằng cách sử dụng Formik.errors.email.
Ở trong Register.jstạo ra xác nhận chức năng và bao gồm nó trong useFormik.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validate: () => {
const errors = {};
console.log(errors)
if (!formik.values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[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
Tiếp theo, hiển thị các thông báo lỗi nếu chúng tồn tại. Sử dụng Formik.touched để kiểm tra xem trường đã được thăm chưa. Điều này ngăn việc hiển thị lỗi cho trường mà người dùng chưa 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 khẩu chuẩn rồi trong Register.js.
import * as Yup from "yup"
Thay vì viết hàm xác thực tùy chỉnh của riêng bạn, hãy sử dụng Yup để kiểm tra xem email và mật khẩu có hợp lệ hay không.
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
},
});
Và đó là nó! Bạn đã tạo một biểu mẫu đăng ký đơn giản bằng Formik và Yup.
Kết thúc mọi thứ
Biểu mẫu là một phần không thể thiếu của bất kỳ ứng dụng nào vì chúng cho phép bạn thu thập thông tin người dùng. Trong React, việc tạo biểu mẫu có thể là một trải nghiệm khó khăn, đặc biệt nếu bạn đang xử lý nhiều dữ liệu hoặc nhiều biểu mẫu. Một công cụ như Formik cung cấp một cách dễ dàng và liền mạch để truy xuất và xác thực các giá trị biểu mẫu.
Đọc tiếp
Thông tin về các Tác giả
