Hướng dẫn sử dụng Formik để tạo biểu mẫu trong React

Formik giúp quá trình tạo biểu mẫu trong React trở nên thuận lợi hơn. Dưới đây là cách áp 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à kết nối giúp quá trình tạo biểu mẫu React dễ dàng hơn. Trong bài viết này, hãy cùng Mytour khám phá cách tạo biểu mẫu đăng ký trong React bằng Formik nhé!

Tạo một ứng dụng React

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

npx create-react-app formik-form

Bây giờ hãy điều hướng đến thư mục formik-form/src và xóa tất cả các tệp, trừ App.js. Tiếp theo, tạo một tệp mới và đặt tê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='Email của bạn'
 value={email}
 onChange={handleEmail}
 />
 <input
 id='password'
 name='password'
 type='password'
 placeholder='Mật khẩu của bạn'
 value={password}
 onChange={handlePassword}
 />
 <input type='submit' value='Gửi' />
 </form>
 );
};
export default Register;

Ở đoạn mã trên, bạn đang tạo trạng thái và hàm xử lý cho mỗi trường nhập liệu. Khi có nhiều trường nhập, mã của bạn có thể trở nên lặp lại và khó kiểm soát. Việc thêm xác thực và xử lý thông báo lỗi có thể là một thách thức khó khăn.

Formik có thể giải quyết vấn đề này. Nó làm cho việc quản lý trạng thái, xác thực và nhập liệu trở nên đơn giản hơn.

Thêm Formik vào React

Trước khi sử dụng formik, hãy cài đặt 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 ở đầu tập tin:

import { useFormik } from 'formik'

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

const formik = useFormik({
 initialValues: {
 email: '',
 password: '',
 },
 onSubmit: values => {
// xử lý gửi biểu mẫu
 },
});

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à sử 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='Email của bạn'
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 <input
 id='password'
 name='password'
 type='password'
 placeholder='Mật khẩu của bạn'
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 <input type='submit' value='Gửi' />
</form>

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

• Cung cấp các trường nhập có giá trị id và name tương ứng với giá trị được sử dụng trong quá trình khởi tạo bằng hook useFormik.
• Trích xuất giá trị của một trường, sử dụng tên của nó từ formik.values.
• Kết nối formik.handleChange với sự kiện onChange để hiển thị giá trị nhập vào theo cách của người dùng.
• Sử dụng formik.handleBlur để theo dõi các trường đã được ghé thăm.
• Kết nối 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

Trong quá trình tạo biểu mẫu, việc xác thực dữ liệu đầu vào rất quan trọng để đảm bảo tính xác thực dễ dàng cho người dùng và dữ liệu được lưu trữ theo đú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, bạn nên 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, mọi lỗi xác thực sẽ được lưu trong Formik.errors, được chỉ mục bằng tên trường nhập. Ví dụ, bạn có thể xem lỗi của trường email bằng Formik.errors.email.

Trong Register.js, hãy 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 = 'Bắt buộc';
 } else if (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
 ) {
 errors.email = 'Địa chỉ email không hợp lệ';
 }
 if (!formik.values.password) {
 errors.password = 'Bắt buộc';
 } else if (formik.values.password.length < 8) {
 errors.password = 'Ít nhất 8 ký tự';
 }
 return errors;
 },
 onSubmit: (values) => {
 console.log('đã gửi!');
 // xử lý khi gửi
 },
});

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 chạm vào chưa. Điều này giúp tránh việc hiển thị lỗi khi người dùng chưa nhập dữ liệu.

<form className='register-form'>
 <input
 id='email'
 name='email'
 type='email'
 placeholder='Email của bạn'
 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='Mật khẩu của bạn'
 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='Gửi' />
</form>

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

Formik cung cấp một cách đơn giản hơn để xác thực biểu mẫu bằng thư viện Yup. Bắt đầu bằng cách cài đặt Yup:

npm install yup

Thêm yup vào trong Register.js.

import * as Yup from 'yup'

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

const formik = useFormik({
 initialValues: {
 email: '',
 password: '',
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email('Địa chỉ email không hợp lệ')
 .required('Bắt buộc'),
 password: Yup.string()
 .min(8, 'Phải có ít nhất 8 ký tự')
 .required('Bắt buộc')
 }),
 onSubmit: (values) => {
 console.log('Đã gửi!');
// xử lý khi gửi
 },
});

Việc hoàn thành! Bạn vừa tạo ra một mẫu đơn đăng ký đơn giản bằng Formik và Yup.

Dưới đây là cách sử dụng Formik để tạo biểu mẫu trong React đơn giản nhất. Hy vọng bài viết này sẽ hữu ích với các bạn!