ReactJS - Lập trình Form

Xin chào, các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của lập trình form trong ReactJS. 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. Nào, hãy lấy một tách cà phê (hoặc đồ uống yêu thích của bạn) và bắt đầu nhé!

Forms trong ReactJS là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu form là gì và tại sao chúng lại quan trọng. Forms giống như người gác cổng của đầu vào người dùng trong các ứng dụng web. Chúng cho phép người dùng tương tác với ứng dụng của chúng ta, cung cấp thông tin mà chúng ta có thể xử lý và sử dụng. Trong React, forms có phần đặc biệt vì chúng duy trì trạng thái riêng. Điều này có nghĩa là chúng ta cần xử lý chúng khác so với các phần tử khác.

Cơ bản về Xử lý Form

Hãy bắt đầu với một ví dụ form đơn giản:

import React, { useState } from 'react';

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

const handleSubmit = (event) => {
event.preventDefault();
alert('Một tên đã được gửi: ' + name);
}

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

Hãy phân tích này:

1. Chúng ta import useState từ React để quản lý trạng thái form.
2. Chúng ta tạo một biến trạng thái name và một hàm setName để cập nhật nó.
3. Hàm handleSubmit ngăn chặn hành vi mặc định của form submission và hiển thị một thông báo với tên đã gửi.
4. Trong form, chúng ta đặt value của input là name và sử dụng onChange để cập nhật trạng thái khi input thay đổi.

Đây là核 tâm của việc xử lý form trong React. Chúng ta đang kiểm soát trạng thái của form với React, đó là lý do chúng ta gọi nó là "controlled component".

Xử lý Nhiều Input

Bây giờ, nếu chúng ta có nhiều input? Liệu chúng ta cần tạo một trạng thái riêng cho từng input? Không nhất thiết! Hãy xem xét một form phức tạp hơn:

import React, { useState } from 'react';

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

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

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form đã gửi:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Tên Đầu"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Tên Cuối"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Gửi</button>
</form>
);
}

Trong ví dụ này, chúng ta sử dụng một đối tượng trạng thái duy nhất để quản lý tất cả các trường form. Hàm handleChange sử dụng thuộc tính name của input để cập nhật trường chính xác trong trạng thái. Cách tiếp cận này mở rộng tốt khi form của bạn lớn hơn.

Xử lý Các Loại Input Khác

Forms không chỉ về input văn bản. Hãy xem chúng ta có thể xử lý các loại input khác như thế nào:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form đã gửi:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Tên"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Tuổi"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Chọn Giới Tính</option>
<option value="male">Nam</option>
<option value="female">Nữ</option>
<option value="other">Khác</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Bạn có phải là sinh viên không?
</label>
<fieldset>
<legend>Màu Yêu Thích</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Đỏ
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Xanh
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Xanh Lá
</label>
</fieldset>
<button type="submit">Gửi</button>
</form>
);
}

Form này minh họa việc xử lý các loại input khác nhau: văn bản, số, select, checkbox và radio button. Chave là trong hàm handleChange, nó kiểm tra loại input và cập nhật trạng thái tương ứng.

Xác nhận Form

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

import React, { useState } from 'react';

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

const [errors, setErrors] = useState({});

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

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Tên người dùng là bắt buộc';
if (!formData.email) {
newErrors.email = 'Email là bắt buộc';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'Email không hợp lệ';
}
if (!formData.password) {
newErrors.password = 'Mật khẩu là bắt buộc';
} else if (formData.password.length < 6) {
newErrors.password = 'Mật khẩu phải có ít nhất 6 ký tự';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Form đã gửi:', formData);
// Tại đây bạn thường gửi dữ liệu đến máy chủ
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Tên người dùng"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Mật khẩu"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Gửi</button>
</form>
);
}

Trong ví dụ này, chúng ta đã thêm một hàm validateForm để kiểm tra các trường trống và xác nhận định dạng email và độ dài mật khẩu. Chúng ta lưu các lỗi trong một đối tượng trạng thái riêng và hiển thị chúng dưới các trường tương ứng.

Kết luận

Và thế là xong! Chúng ta đã bao quát cơ bản về xử lý form trong React, từ input văn bản đơn giản đến form phức tạp với các loại input khác nhau và xác nhận. Hãy nhớ, thực hành là cách tốt nhất để thành thạo. Hãy thử xây dựng form của riêng bạn, thử nghiệm với các loại input khác nhau và đừng sợ mắc lỗi - đó là cách chúng ta học hỏi!

Dưới đây là bảng tóm tắt các phương thức chúng ta đã sử dụng:

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

Chúc các bạn lập trình vui vẻ và form của bạn luôn thân thiện với người dùng và không có lỗi!

Credits: Image by storyset