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

Formik khiến việc tạo biểu mẫu trong React dễ dàng hơn. Dưới đây là cách 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 giúp quá trình tạo biểu mẫu React đơn giản hơn. Ở bài viết này, hãy cùng Download.vn học cách tạo biểu mẫu đăng ký trong React bằng Formik nhé!

Tạo một app React

Dùng create-react-app để tạo một dự án React mới:

npx create-react-app formik-form

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

Tạo một biểu mẫu trong React

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

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

React khuyến khích bạn dùng thành phần được kiểm soát. Chúng cho phép bạn theo dõi dữ liệu trong biểu mẫu ở trạng thái nội bộ nên sẽ có toàn quyền quản lý biểu mẫu.

Bên dưới là một ví dụ biểu mẫu được tạo bằ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;

Ở code trên, bạn đang khởi tạo trạng thái và tạo một hàm xử lý cho từng trường dữ liệu nhập vào. Trong khi nó hoạt động, code của bạn có thể bị lặp lại và lộn xộn, nhất là khi có nhiều trường nhập. Thêm xác thực và xử lý thông báo lỗi là một thử thách khác.

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

Thêm Formik vào React

Trước khi dùng formik, thêm nó vào dự án bằng npm.

npm install formik

Để tích hợp Formik, bạn sẽ dùng hook useFormik. Trong Register.js, nhập useFormik ở phía trên đầu của file:

import { useFormik } from "formik"

Bước đầu tiên là thiết lập các giá trị của 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, nhận các giá trị và xử lý gửi biểu mẫu. Đối với một biểu mẫu đăng ký, hành động này tạo người dùng mới trong cơ sở dữ liệu.

Bước tiếp theo là dùng đối tượng formik để lấy 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>

Ở code trên, bạn đang:

• Cung cấp các trường nhập là giá trị id và name tương đương với giá trị được dùng trong quá trình khởi tạo bằng hook useFormik.
• Truy cập giá trị của một trường, dùng tên của nó để trích xuất nó từ formik.values.
• Liên kết formik.handleChange với sự kiện onChange để hiện các giá trị nhập vào làm kiểu người dùng.
• Dùng formik.handleBlur để theo dõi các trường đã ghé thăm.
• Liên kết formik.handleSubmit với sự kiện onSubmit để kích hoạt hàm onSubmit bạn đã thêm vào hook useFormik.

Kích hoạt xác thực biểu mẫu

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

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

Nếu thêm hàm xác thực vào useFormik, bất kỳ lỗi xác thực được tìm thấy sẽ nằm trong Formik.errors, được lập chỉ mục trên tên trường nhập. Ví dụ, bạn có thể xem lỗi về trường email bằng Formik.errors.email.

Trong Register.js, tạo hàm validate 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ị thông báo lỗi nếu có. Dùng Formik.touched để kiểm tra trường đó đã được ghé thăm hay chưa. Điều này tránh hiện lỗi ở trường 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ễ hơn để xác thực các biểu mẫu bằng thư viện Yup. Cài đặt Yup để bắt đầu:

npm install yup

Nhập yup trong Register.js.

import * as Yup from "yup"

Thay vì tự viết hàm xác thực, 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
 },
});

Thế là xong! Bạn đã tạo một biểu mẫu đăng ký đơn giản bằng Formik và Yup.

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