ReactJS - Component không được kiểm soát (Uncontrolled Component)

Xin chào các bạn đang theo đuổi lập trình! Hôm nay, chúng ta sẽ cùng nhau lặn sâu vào thế giới của ReactJS và khám phá một khái niệm叫做 "Component không được kiểm soát" (Uncontrolled Components). Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm cho hàng trăm sinh viên trong nhiều năm qua. Vậy, hãy lấy một ly đồ uống yêu thích của bạn, và cùng nhau bắt đầu hành trình thú vị này nhé!

Component không được kiểm soát là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu qua về component không được kiểm soát trong React. Hãy tưởng tượng bạn đang điền một mẫu giấy - bạn viết thông tin của mình, và khi bạn xong, bạn nộp nó. Đó chính là cách mà component không được kiểm soát hoạt động trong React!

Trong React, một component không được kiểm soát là một phần tử form quản lý trạng thái nội bộ của nó, thay vì để React kiểm soát. Nó giống như cho phần tử form một ý chí riêng!

Lập trình Form trong Component không được kiểm soát

Bây giờ, hãy撸 lên áo và cùng nhau viết mã. Chúng ta sẽ bắt đầu với một ví dụ đơn giản để minh họa cách component không được kiểm soát hoạt động trong lập trình form.

Input cơ bản không được kiểm soát

Dưới đây là một ví dụ cơ bản về input không được kiểm soát:

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Tên:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

Trong ví dụ này, chúng ta có một form đơn giản với một input văn bản cho tên. Chú ý rằng chúng ta không có bất kỳ state hoặc handler onChange nào? Đó là vì input đang quản lý trạng thái nội bộ của nó.

Truy cập giá trị Input

Nhưng chờ đã, bạn có thể hỏi, "Chúng ta làm thế nào để lấy giá trị của input nếu React không quản lý nó?" Đó là một câu hỏi tuyệt vời! Chúng ta có thể sử dụng một ref để truy cập trực tiếp vào node DOM. Hãy sửa đổi ví dụ của chúng ta:

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

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

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Tên:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Gửi</button>
</form>
);
}

export default SimpleForm;

Trong phiên bản cập nhật này, chúng ta sử dụng hook useRef để tạo một tham chiếu đến input của mình. Khi form được gửi, chúng ta có thể truy cập giá trị của input bằng cách sử dụng inputRef.current.value.

Tạo một Form đơn giản

Bây giờ chúng ta đã hiểu được cơ bản, hãy tạo một form toàn diện hơn sử dụng component không được kiểm soát.

Form nhiều Input

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Dữ liệu form:', formData);
// Tại đây bạn thường gửi dữ liệu đến máy chủ
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Tên:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Tin nhắn:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Gửi tin nhắn</button>
</form>
);
}

export default ComplexForm;

Trong ví dụ này, chúng ta đã tạo một form với ba trường: tên, email và tin nhắn. Mỗi trường có một ref riêng, cho phép chúng ta truy cập giá trị của nó khi form được gửi.

Giải thích

1. Chúng ta tạo refs cho mỗi input bằng cách sử dụng useRef.
2. Trong hàm handleSubmit, chúng ta ngăn chặn hành vi gửi form mặc định và thu thập giá trị từ mỗi input bằng cách sử dụng refs của chúng.
3. Chúng ta sau đó ghi dữ liệu form vào console (trong một ứng dụng thực tế, bạn thường gửi dữ liệu này đến máy chủ).

Ưu và nhược điểm của Component không được kiểm soát

Hãy cùng nhau thảo luận về những ưu điểm và nhược điểm của việc sử dụng component không được kiểm soát:

Ưu điểm	Nhược điểm
Mã đơn giản hơn cho các form cơ bản	Ít kiểm soát hơn đối với giá trị form
Có thể hữu ích cho việc tích hợp React với mã không phải React	Khó hơn trong việc thực hiện validate form động
Hiệu suất có thể tốt hơn cho các form rất lớn	Khó reset giá trị form một cách chương trình
Hoạt động tốt với các input tệp tin	Ít "React-like" - không tuân theo nguyên tắc nguồn sự thật duy nhất

Khi nào nên sử dụng Component không được kiểm soát

Component không được kiểm soát có thể hữu ích trong một số tình huống:

1. Khi tích hợp với mã hoặc thư viện không phải React
2. Đối với các form đơn giản không cần validate hoặc cập nhật động
3. Khi làm việc với các input tệp tin (được coi là không được kiểm soát)

Tuy nhiên, đối với hầu hết các ứng dụng React, component được kiểm soát (trong đó React quản lý trạng thái form) thường được ưa thích hơn vì chúng cung cấp nhiều kiểm soát hơn và phù hợp hơn với triết lý của React.

Kết luận

Và thế là bạn đã cùng nhau hành trình qua thế giới của component không được kiểm soát trong React. Nhớ rằng, như việc chọn giữa xe手动 và xe tự động, sự lựa chọn giữa component được kiểm soát và không được kiểm soát phụ thuộc vào nhu cầu cụ thể của bạn.

Khi chúng ta kết thúc, tôi nhớ lại một sinh viên đã từng nói với tôi, "React như việc nấu ăn - đôi khi bạn cần đo lường chính xác, và đôi khi bạn có thể đoán mò." Component không được kiểm soát là một chút như đoán mò - chúng có vị trí của mình, nhưng hãy sử dụng chúng một cách khôn ngoan!

Tôi hy vọng hướng dẫn này đã chiếu sáng con đường của bạn trong việc sử dụng component không được kiểm soát. Hãy tiếp tục thực hành, tiếp tục viết mã, và nhớ rằng - trong thế giới lập trình, mỗi lỗi là một bước tiến đến thành công!

Chúc mừng coding, các nhà vô địch React tương lai!

Credits: Image by storyset