Mẹo Vặt Cuộc Sống

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 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 giúp việc tạo biểu mẫu trong React trở nên đơn giản hơn. Trong bài viết này, hãy cùng Nhôm Kính Nam Phát 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. 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. 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 Phản ứ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 tra 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ộ để bạn có toàn quyền kiểm soát biểu mẫu.

Đây là một biểu mẫu ví dụ đượ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
 
 name="email"
 type="email"
 placeholder="Your Email"
 value={email}
 onChange={handleEmail}
 />
 <input
 
 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 nó 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ó rất 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 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 formikthêm nó vào dự án bằng cách sử dụng npm.

npm install formik

Để tích hợp Formik, bạn sẽ 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ị 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, hàm này nhận 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 ra một 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
 
 name="email"
 type="email"
 placeholder="Your Email"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 <input
 
 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 các trường đầu vào với các giá trị id và tên tương đương với các giá trị được sử dụng trong quá trình khởi tạo với hook useFormik.
  • 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ự kiện onChange để 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.handleSubmit với sự kiện onSubmit để kích hoạt chức năng onSubmit mà bạn đã thêm vào hook useFormik.

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ị của 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 useFormikbất kỳ lỗi xác thực nào được tìm thấy sẽ có trong Formik.errors, được lập chỉ mục trên tên trường đầu vào. Ví dụ: bạn có thể xem lỗi trường email với Formik.errors.email.

Trong Register.jstạo chức năng xác nhận và đặt nó vào 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._%+-][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

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

<form className="register-form">
 <input
 
 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
 
 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
 },
});

Xong! 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 với bạn!


Vừa rồi, nhomkinhnamphat.com vừa mới đưa tới bạn đọc bài viết về Cách dùng Formik để tạo biểu mẫu trong React này.
Hy vọng rằng với nhưng thông tin bạn có được sau khi đọc bài viết Cách dùng Formik để tạo biểu mẫu trong React sẽ giúp bạn giải trí và quan tâm hơn về vấn đề Cách dùng Formik để tạo biểu mẫu trong React hiện nay.
Hãy cũng với nhomkinhnamphat.com viết thêm nhiều bài viết về chủ đề Cách dùng Formik để tạo biểu mẫu trong React nhé.

Xem Thêm:  PCI là gì? Bảng chỉ số PCI các tỉnh Việt Nam mới nhất

Bài viết Cách dùng Formik để tạo biểu mẫu trong React được đăng bởi vào ngày 2022-06-03 00:51:26. Cảm ơn bãn đọc đã quan tâm và đọc tin tại nhomkinhnamphat.com/

Xem thêm thông tin về Cách dùng Formik để tạo biểu mẫu trong React

#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 ReactFormik 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 giúp việc tạo biểu mẫu trong React đơn giản hơn. Trong bài viết này, hãy cùng Nhôm Kính Nam Phát 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. 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. 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 Phản ứ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ộ để bạn có toàn quyền kiểm soát biểu mẫu.
Dưới đây là một biểu mẫu ví dụ đượ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

name=”email”
type=”email”
placeholder=”Your Email”
value={email}
onChange={handleEmail}
/>
<input

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 nó hoạt động, mã của bạn có thể lặp đi lặp lại và lộn xộn, đặc biệt là khi có rất 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 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 formikthêm nó vào dự án bằng cách sử dụng npm.
npm install formik
Để tích hợp Formik, bạn sẽ 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ị 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, hàm này nhận 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.
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

name=”email”
type=”email”
placeholder=”Your Email”
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input

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 các trường đầu vào với các giá trị id và tên tương đương với các giá trị được sử dụng trong quá trình khởi tạo với hook useFormik.
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ự kiện onChange để 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.handleSubmit với sự kiện onSubmit để kích hoạt chức năng onSubmit mà bạn đã thêm vào hook useFormik.

Bật xác thực 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ị của 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 useFormikbất kỳ lỗi xác thực nào được tìm thấy sẽ có trong Formik.errors, được lập chỉ mục trên các tên trường đầu vào. Ví dụ: bạn có thể xem lỗi trường email với Formik.errors.email.
Ở trong Register.jstạo chức năng xác nhận và đưa nó vào 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._%+-][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
Tiếp theo, 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 người dùng không được truy cập.
<form className=”register-form”>
<input

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

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 vào 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
},
});
Xong rôi! 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 với bạn!

Xem Thêm:  Top 10 bài thơ về chú bộ đội Hải Quân hay, ngắn gọn

#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 ReactFormik 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 giúp việc tạo biểu mẫu trong React đơn giản hơn. Trong bài viết này, hãy cùng Nhôm Kính Nam Phát 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. 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. 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 Phản ứ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ộ để bạn có toàn quyền kiểm soát biểu mẫu.
Dưới đây là một biểu mẫu ví dụ đượ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

name=”email”
type=”email”
placeholder=”Your Email”
value={email}
onChange={handleEmail}
/>
<input

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 nó hoạt động, mã của bạn có thể lặp đi lặp lại và lộn xộn, đặc biệt là khi có rất 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 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 formikthêm nó vào dự án bằng cách sử dụng npm.
npm install formik
Để tích hợp Formik, bạn sẽ 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ị 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, hàm này nhận 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.
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

name=”email”
type=”email”
placeholder=”Your Email”
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input

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 các trường đầu vào với các giá trị id và tên tương đương với các giá trị được sử dụng trong quá trình khởi tạo với hook useFormik.
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ự kiện onChange để 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.handleSubmit với sự kiện onSubmit để kích hoạt chức năng onSubmit mà bạn đã thêm vào hook useFormik.

Bật xác thực 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ị của 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 useFormikbất kỳ lỗi xác thực nào được tìm thấy sẽ có trong Formik.errors, được lập chỉ mục trên các tên trường đầu vào. Ví dụ: bạn có thể xem lỗi trường email với Formik.errors.email.
Ở trong Register.jstạo chức năng xác nhận và đưa nó vào 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._%+-][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
Tiếp theo, 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 người dùng không được truy cập.
<form className=”register-form”>
<input

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

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 vào 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
},
});
Xong rôi! 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 với bạn!

Xem Thêm:  10 cách diệt ve chó đơn giản, tận gốc, hiệu quả tại nhà

#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 ReactFormik 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 giúp việc tạo biểu mẫu trong React đơn giản hơn. Trong bài viết này, hãy cùng Nhôm Kính Nam Phát 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. 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. 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 Phản ứ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ộ để bạn có toàn quyền kiểm soát biểu mẫu.
Dưới đây là một biểu mẫu ví dụ đượ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

name=”email”
type=”email”
placeholder=”Your Email”
value={email}
onChange={handleEmail}
/>
<input

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 nó hoạt động, mã của bạn có thể lặp đi lặp lại và lộn xộn, đặc biệt là khi có rất 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 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 formikthêm nó vào dự án bằng cách sử dụng npm.
npm install formik
Để tích hợp Formik, bạn sẽ 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ị 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, hàm này nhận 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.
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

name=”email”
type=”email”
placeholder=”Your Email”
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input

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 các trường đầu vào với các giá trị id và tên tương đương với các giá trị được sử dụng trong quá trình khởi tạo với hook useFormik.
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ự kiện onChange để 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.handleSubmit với sự kiện onSubmit để kích hoạt chức năng onSubmit mà bạn đã thêm vào hook useFormik.

Bật xác thực 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ị của 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 useFormikbất kỳ lỗi xác thực nào được tìm thấy sẽ có trong Formik.errors, được lập chỉ mục trên các tên trường đầu vào. Ví dụ: bạn có thể xem lỗi trường email với Formik.errors.email.
Ở trong Register.jstạo chức năng xác nhận và đưa nó vào 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._%+-][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
Tiếp theo, 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 người dùng không được truy cập.
<form className=”register-form”>
<input

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

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 vào 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
},
});
Xong rôi! 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 với bạn!

Rate this post

Nam Phát Nguyễn

Tôi là người viết blog cho Nhôm Kính Nam Phát. Tôi đã viết và xuất bản hơn 2.000 bài viết về các chủ đề khác nhau. Tôi sinh ra ở Việt Nam, nhưng chuyển đến Canada từ nhỏ. Bây giờ, tôi sống ở Toronto với vợ, con và con chó của mình. Tôi nói tiếng Việt, tiếng Anh và tiếng Pháp. Mục tiêu của tôi là cung cấp thông tin hữu ích cho những người quan tâm đến văn hóa, lịch sử, ẩm thực Việt Nam và những thứ khác liên quan đến cuộc sống ở Việt Nam. Tôi thích viết về thực phẩm, vì vậy bạn có thể mong đợi tìm thấy nhiều bài đăng về điều đó. Tôi cũng thích viết về lịch sử, thời trang và phong cách sống, vì vậy không có lý do gì bạn không thể tìm thấy những loại chủ đề đó trên blog của tôi.
Back to top button