ReactJS - Formik: Xây dựng một biểu mẫu chi phí

Xin chào các bạn future React developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới xử lý biểu mẫu trong React bằng một thư viện tuyệt vời叫做 Formik. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các biểu mẫu tinh tế và hiệu quả như một chuyên gia. Hãy cùng nhau khám phá nhé!

ReactJS - Formik

Formik là gì?

Trước khi bắt đầu viết mã, hãy hiểu Formik là gì và tại sao nó lại là một bước đột phá trong phát triển React.

Formik là một thư viện phổ biến giúp đơn giản hóa việc xử lý biểu mẫu trong các ứng dụng React. Nó lo liệu các phần công việc nhàm chán như quản lý trạng thái biểu mẫu, xác minh và gửi biểu mẫu, để bạn có thể tập trung vào điều quan trọng nhất - logic của ứng dụng bạn.

Hãy tưởng tượng Formik như một trợ lý cá nhân. Giống như một trợ lý giỏi sẽ xử lý tất cả các công việc giấy tờ cho bạn, Formik quản lý tất cả các nhiệm vụ liên quan đến biểu mẫu, để bạn tự do tập trung vào bức tranh lớn hơn.

Thiết lập dự án của chúng ta

Thứ nhất, hãy thiết lập dự án của chúng ta. Giả sử bạn đã cài đặt Node.js trên máy tính của bạn. Nếu chưa, hãy tiến hành cài đặt từ trang web chính thức của Node.js.

Mở terminal và chạy các lệnh sau:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Các lệnh này tạo một ứng dụng React mới, cài đặt Formik và Yup (thư viện xác minh biểu mẫu), và khởi động máy chủ phát triển.

Tạo biểu mẫu chi phí của chúng ta

Bây giờ chúng ta đã thiết lập dự án, hãy tạo biểu mẫu chi phí của chúng ta. Chúng ta sẽ xây dựng một biểu mẫu đơn giản cho phép người dùng nhập mô tả và số tiền.

Bước 1: Cấu trúc biểu mẫu cơ bản

Hãy bắt đầu bằng cách tạo cấu trúc biểu mẫu cơ bản. Mở file src/App.js và thay thế nội dung của nó bằng mã sau:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Chi Phí Biểu Mẫu</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Mô tả</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Số tiền</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Gửi
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Đây là những gì đang diễn ra ở đây:

Chúng ta import các thành phần cần thiết từ Formik.
Chúng ta tạo một thành phần Formik bao quanh biểu mẫu của mình.
Chúng ta đặt initialValues cho các trường biểu mẫu.
Chúng ta định nghĩa hàm onSubmit để xử lý gửi biểu mẫu.
Chúng ta sử dụng các thành phần Form, Field, và ErrorMessage của Formik để tạo cấu trúc biểu mẫu.

Bước 2: Thêm xác minh

Bây giờ, hãy thêm một chút xác minh vào biểu mẫu của chúng ta. Chúng ta sẽ sử dụng Yup cho điều này. Cập nhật file App.js của bạn như sau:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Quá ngắn!')
.max(50, 'Quá dài!')
.required('Bắt buộc'),
amount: Yup.number()
.positive('Phải là số dương')
.required('Bắt buộc'),
});

function App() {
return (
<div className="App">
<h1>Chi Phí Biểu Mẫu</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Mô tả</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Số tiền</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Gửi
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Đây là những gì chúng ta đã thêm vào:

Chúng ta import Yup và định nghĩa một giản đồ xác minh (ExpenseSchema).
Chúng ta thêm thuộc tính validationSchema vào thành phần Formik.

Bây giờ biểu mẫu của chúng ta sẽ xác minh các đầu vào trước khi gửi!

Bước 3: Thêm样式 cho biểu mẫu

Hãy thêm một chút样式 để làm cho biểu mẫu của chúng ta trông đẹp hơn. Tạo một file mới叫做 App.css trong thư mục src và thêm CSS sau:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Bây giờ, cập nhật file App.js để import file样式 này:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... phần còn lại của mã vẫn giữ nguyên

Kết luận

Chúc mừng! Bạn vừa xây dựng xong một biểu mẫu chi phí chức năng sử dụng Formik và React. Đây chỉ là bắt đầu của những gì bạn có thể làm với Formik. Khi bạn tiếp tục hành trình React của mình, bạn sẽ thấy Formik là một công cụ vô giá cho việc xử lý các biểu mẫu với mọi mức độ phức tạp.

Nhớ rằng, thực hành làm nên完美. Hãy thử thay đổi biểu mẫu này, thêm các trường mới, hoặc tạo biểu mẫu hoàn toàn mới bằng những gì bạn đã học. Thế giới phát triển React là rộng lớn và đầyExciting, và bạn đang trên đường trở thành một phần của nó!

Chúc bạn may mắn và các biểu mẫu của bạn luôn xác minh mượt mà! ?

Bảng phương thức Formik

Dưới đây là bảng một số phương thức Formik thường được sử dụng:

Phương thức	Mô tả
`handleSubmit`	Xử lý gửi biểu mẫu
`handleChange`	Xử lý thay đổi trường biểu mẫu
`handleBlur`	Xử lý khi một trường mất focus
`setFieldValue`	Đặt giá trị của một trường thủ công
`setFieldTouched`	Đặt trạng thái đã chạm của một trường thủ công
`validateForm`	Khởi động xác minh biểu mẫu thủ công
`resetForm`	Đặt biểu mẫu về giá trị ban đầu
`setErrors`	Đặt lỗi biểu mẫu thủ công
`setStatus`	Đặt một đối tượng trạng thái顶层
`setSubmitting`	Đặt trạng thái gửi biểu mẫu

Những phương thức này cung cấp cho bạn quyền kiểm soát chi tiết về hành vi và trạng thái biểu mẫu. Khi bạn trở nên thoải mái hơn với Formik, bạn sẽ thấy mình thường xuyên sử dụng các phương thức này để tạo các biểu mẫu phức tạp và tương tác hơn.

Credits: Image by storyset

Hướng Dẫn Trước:

ReactJS - Thành Phần Không Được Điều Khiển

Hướng Dẫn Tiếp Theo:

ReactJS -渲染 Điều Kiện