ReactJS - Các thành phần Form

Xin chào các bạn nhà phát triển đang học hỏi! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới đầy thú vị của các thành phần form trong React. Là một giáo viên khoa học máy tính gần gũi, tôi sẽ hướng dẫn các bạn từng bước trong hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu cuộc phiêu lưu lập trình này nhé!

什么是 Form Component?

Trước khi chúng ta nhảy vào chi tiết của các thành phần form trong React, hãy dành một chút thời gian để hiểu chúng là gì và tại sao chúng lại quan trọng.

Định nghĩa

Một thành phần form trong React là một thành phần chuyên dụng được thiết kế để xử lý đầu vào của người dùng và gửi dữ liệu. Nó giống như một phiên bản kỹ thuật số của những biểu mẫu giấy mà bạn điền tại văn phòng bác sĩ, nhưng cool hơn và tương tác hơn!

Tầm quan trọng

Các thành phần form rất quan trọng trong phát triển web vì chúng là phương tiện chính để thu thập thông tin từ người dùng. Dù đó là một biểu mẫu đăng nhập đơn giản hay một cuộc khảo sát phức tạp, các thành phần form cho phép người dùng tương tác với ứng dụng của bạn và cung cấp dữ liệu quý giá.

Áp dụng các thành phần Form

Bây giờ chúng ta đã hiểu form component là gì, hãy撸 sleeves của chúng ta lên và học cách tạo và sử dụng chúng trong React.

Cấu trúc Form cơ bản

Hãy bắt đầu với một ví dụ đơn giản của một thành phần form:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert(`Xin chào, ${name}!`);
};

return (
<form onSubmit={handleSubmit}>
<label>
Tên:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Gửi</button>
</form>
);
}

Giải thích:

1. Chúng ta import useState từ React để quản lý trạng thái của form.
2. Chúng ta tạo một thành phần hàm叫做 SimpleForm.
3. Trong thành phần, chúng ta sử dụng useState để tạo một biến trạng thái name và hàm đặt lại setName.
4. Chúng ta định nghĩa một hàm handleSubmit để ngăn chặn hành vi gửi form mặc định và hiển thị một thông báo với tên đã nhập.
5. Trong câu lệnh return, chúng ta render một form với một trường nhập cho tên và một nút gửi.
6. Trường nhập được kiểm soát bởi trạng thái name, và sự kiện onChange cập nhật trạng thái khi người dùng gõ.

Xử lý nhiều đầu vào

Bây giờ, hãy nâng cấp và tạo một form với nhiều đầu vào:

import React, { useState } from 'react';

function MultiInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form submitted:', formData);
};

return (
<form onSubmit={handleSubmit}>
<label>
First Name:
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
/>
</label>
<label>
Last Name:
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
/>
</label>
<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

Trong ví dụ này:

1. Chúng ta sử dụng một đối tượng trạng thái duy nhất formData để lưu trữ tất cả các trường form.
2. Hàm handleChange sử dụng thuộc tính name của đầu vào để cập nhật trường đúng trong trạng thái.
3. Chúng ta sử dụng toán tử phân tán (...prevData) để sao chép trạng thái hiện tại trước khi cập nhật.

Xác thực Form

Không có form nào hoàn chỉnh nếu thiếu xác thực! Hãy thêm một chút xác thực cơ bản vào form của chúng ta:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const validate = () => {
let tempErrors = {};
if (!formData.username) tempErrors.username = "Username is required";
if (formData.password.length < 6) tempErrors.password = "Password must be at least 6 characters";
setErrors(tempErrors);
return Object.keys(tempErrors).length === 0;
};

const handleSubmit = (event) => {
event.preventDefault();
if (validate()) {
console.log('Form submitted:', formData);
} else {
console.log('Form has errors');
}
};

return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
{errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
{errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
</label>
<button type="submit">Submit</button>
</form>
);
}

Trong ví dụ này:

1. Chúng ta thêm một trạng thái mới errors để lưu trữ các lỗi xác thực.
2. Chúng ta tạo một hàm validate để kiểm tra tên người dùng trống và mật khẩu quá ngắn.
3. Trong handleSubmit, chúng ta chỉ tiếp tục nếu form geçerli.
4. Chúng ta hiển thị các thông báo lỗi bên dưới mỗi trường đầu vào khi xác thực thất bại.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua thế giới của các thành phần form trong React, từ các đầu vào đơn giản đến các form nhiều trường với xác thực. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngại thử nghiệm với các khái niệm này và tạo form của riêng bạn.

Khi chúng ta kết thúc, đây là một bảng tóm tắt các phương thức chính chúng ta đã sử dụng trong các thành phần form của mình:

Phương thức	Mục đích
useState	Quản lý trạng thái form
onChange	Xử lý thay đổi đầu vào
onSubmit	Xử lý gửi form
preventDefault	Ngăn chặn hành vi mặc định của form

Tiếp tục lập trình, 保持好奇心, và nhớ rằng: trong thế giới lập trình, mỗi lỗi là một cơ hội học tập ẩn giấu. Chúc các bạn may mắn với React!

Credits: Image by storyset