ReactJS - Thành phần điều khiển: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture nhà phát triển React! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới các Thành phần Điều khiển trong ReactJS. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo các biểu mẫu như một chuyên gia!

ReactJS - Controlled Component

Thành phần Điều khiển là gì?

Trước khi chúng ta đi sâu vào, hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng bạn đang ở một nhà hàng sang trọng và bạn muốn đặt một chiếc pizza tùy chỉnh. Trong kịch bản này, bạn (thành phần React) là người điều khiển những gì xảy ra trên pizza (dữ liệu biểu mẫu). Mỗi khi bạn muốn thêm hoặc loại bỏ một topping, bạn sẽ nói với người phục vụ (trạng thái), và họ sẽ cập nhật đơn hàng của bạn tương ứng. Đây chính là cách các thành phần điều khiển hoạt động trong React!

Trong thuật ngữ React, một thành phần điều khiển là một phần tử đầu vào biểu mẫu mà giá trị của nó được điều khiển bởi React. Thay vì DOM xử lý dữ liệu biểu mẫu, React sẽ đảm nhận vai trò này.

Tại sao sử dụng Thành phần Điều khiển?

Nguồn sự thật duy nhất: Tất cả dữ liệu biểu mẫu được lưu trữ trong trạng thái của thành phần.
Truy cập ngay lập tức vào đầu vào: Bạn có thể truy cập các giá trị đầu vào ngay lập tức.
Điều khiển nhiều hơn: Bạn có thể dễ dàng manip và kiểm tra dữ liệu đầu vào.

Bây giờ, hãy cùng nhau viết mã!

Thành phần Điều khiển với Đầu vào Đơn giản

Hãy bắt đầu với một ví dụ đơn giản - một trường nhập văn bản chào mừng người dùng.

import React, { useState } from 'react';

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

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Hello, {name}!</p>
</div>
);
}

export default GreetingInput;

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

Chúng ta import useState từ React để quản lý trạng thái của thành phần.
Chúng ta tạo một biến trạng thái name và hàm đặt lại setName.
Hàm handleChange cập nhật trạng thái name mỗi khi đầu vào thay đổi.
Trong JSX, chúng ta đặt giá trị của đầu vào là name và gắn sự kiện onChange vào handleChange.
Chúng ta hiển thị lời chào sử dụng giá trị hiện tại của name.

Đây chính là essence của một thành phần điều khiển - React điều khiển giá trị của đầu vào thông qua trạng thái.

Thử nó Yourself!

Hãy thử nhập tên của bạn vào trường đầu vào. Chú ý rằng lời chào được cập nhật ngay lập tức? Đó là phép màu của các thành phần điều khiển!

Tạo một Biểu mẫu Đơn giản

Bây giờ chúng ta đã nắm vững các nguyên tắc cơ bản, hãy tạo một biểu mẫu phức tạp hơn với nhiều đầu vào.

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Đặt hàng thành công! Tên: ${order.name}, Cỡ: ${order.size}, Toppings: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Tên của bạn"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small"> Nhỏ </option>
<option value="medium"> Vừa </option>
<option value="large"> Lớn </option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="phô mai"
checked={order.toppings.includes('phô mai')}
onChange={handleChange}
/>
Phô mai
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Đặt hàng</button>
</form>
);
}

export default PizzaOrderForm;

Wow, đó là rất nhiều mã! Nhưng đừng lo lắng, chúng ta sẽ phân tích từng bước:

Chúng ta tạo một đối tượng trạng thái order chứa tất cả dữ liệu biểu mẫu của chúng ta.
Hàm handleChange hiện tại phức tạp hơn. Nó xử lý các loại đầu vào khác nhau:

Đối với các đầu vào văn bản và chọn, nó cập nhật thuộc tính tương ứng trong trạng thái.
Đối với các hộp kiểm, nó thêm hoặc loại bỏ các topping từ mảng.

Chúng ta có một hàm handleSubmit để ngăn chặn hành vi mặc định của biểu mẫu và hiển thị một thông báo với chi tiết đơn hàng.
Trong JSX, chúng ta tạo các đầu vào cho tên, cỡ (als một chọn) và topping (als các hộp kiểm).
Mỗi đầu vào có giá trị (hoặc trạng thái đã chọn cho các hộp kiểm) được điều khiển bởi trạng thái order.

Sức mạnh của các Biểu mẫu Điều khiển

Với cấu hình này, bạn có toàn quyền kiểm soát dữ liệu biểu mẫu của mình. Muốn thêm validation? Dễ dàng! Chỉ cần chỉnh sửa hàm handleChange. Cần chuyển đổi dữ liệu trước khi gửi? Chỉ cần cập nhật hàm handleSubmit. Các khả năng là không giới hạn!

Các Phương thức Thường gặp cho Thành phần Điều khiển

Hãy tóm tắt một số phương thức thường gặp được sử dụng với các thành phần điều khiển:

Phương thức	Mô tả
`useState`	Hook để quản lý trạng thái của thành phần
`onChange`	Bộ xử lý sự kiện cho sự thay đổi đầu vào
`onSubmit`	Bộ xử lý sự kiện cho việc gửi biểu mẫu
`preventDefault`	Ngăn chặn hành vi mặc định của biểu mẫu
`event.target.value`	Truy xuất giá trị hiện tại của một đầu vào
`event.target.checked`	Truy xuất trạng thái đã chọn của một hộp kiểm

Kết luận

Chúc mừng! Bạn đã học về các thành phần điều khiển trong React. Chúng ta đã xem xét các đầu vào đơn giản, biểu mẫu phức tạp và thậm chí tạo một biểu mẫu đặt pizza (tôi đang rất đói khi nghĩ về nó!).

Nhớ rằng các thành phần điều khiển cho bạn quyền kiểm soát chính xác dữ liệu biểu mẫu. Ban đầu có thể có vẻ như nhiều công việc, nhưng quyền kiểm soát và tính linh hoạt bạn nhận được là hoàn toàn xứng đáng.

Khi bạn tiếp tục hành trình React của mình, bạn sẽ tìm thấy vô số cách để sử dụng các thành phần điều khiển. Có lẽ bạn sẽ tạo một编辑器 bài đăng blog, một biểu mẫu đăng ký người dùng, hoặc thậm chí một ứng dụng giao hàng pizza (nếu bạn làm, hãy gửi tôi một mã giảm giá!).

Tiếp tục thực hành, hãy tò mò và chúc bạn may mắn trong lập trình!

Credits: Image by storyset

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

ReactJS - Lập trình biểu mẫu

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

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