React Forms: Controlled vs Uncontrolled Components

Forms là một phần quan trọng trong các ứng dụng web, giúp người dùng nhập dữ liệu, thực hiện tìm kiếm, gửi thông tin, v.v. Trong React, form có thể được xây dựng dưới hai dạng chính: Controlled Components và Uncontrolled Components. Mỗi dạng có ưu, nhược điểm riêng và phù hợp với các trường hợp khác nhau.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu:

1. Form trong React là gì?
2. Controlled Components là gì?
3. Uncontrolled Components là gì?
4. So sánh Controlled vs Uncontrolled Components
5. Khi nào nên sử dụng Controlled và Uncontrolled Components?
6. Ví dụ minh họa
7. Kết luận

1. Form trong React là gì?

Form là một phần tử HTML cho phép người dùng nhập và gửi dữ liệu. Trong React, việc quản lý giá trị của các trường input có thể được thực hiện bằng hai cách:

• Controlled Components: React trực tiếp kiểm soát giá trị của input thông qua state.
• Uncontrolled Components: Giá trị của input được quản lý bởi DOM, React không can thiệp trực tiếp.

2. Controlled Components là gì?

Trong Controlled Components, React chịu trách nhiệm hoàn toàn cho giá trị của các trường input thông qua state.

• Mỗi thay đổi trong input sẽ kích hoạt một onChange event.
• State sẽ lưu giá trị của input và hiển thị lại.
• Dữ liệu được đồng bộ giữa state và UI.

Ví dụ về Controlled Component:

import React, { useState } from 'react';		
			
function ControlledForm() {		
	  const [inputValue, setInputValue] = useState('');		
			
	  const handleChange = (e) => {		
	    setInputValue(e.target.value);		
	  };		
			
	  const handleSubmit = (e) => {		
	    e.preventDefault();		
	    alert(`Input Value: ${inputValue}`);		
	  };		
			
	  return (		
	    <form onSubmit={handleSubmit}>		
	      <label>		
	        Name:		
	        <input type="text" value={inputValue} onChange={handleChange} />		
	      </label>		
	      <button type="submit">Submit</button>		
	    </form>		
	  );		
}		
			
export default ControlledForm;		

Ưu điểm của Controlled Components:

• Dễ dàng kiểm soát và theo dõi giá trị của input.
• Dễ dàng thực hiện validation và xử lý lỗi.
• Giá trị input luôn được đồng bộ với state.

Nhược điểm:

• Có thể tạo ra nhiều re-render, ảnh hưởng đến hiệu suất với nhiều input.
• Cần nhiều mã lệnh cho từng input.

3. Uncontrolled Components là gì?

Trong Uncontrolled Components, giá trị của input được lưu trữ trực tiếp trong DOM và không được React kiểm soát. React chỉ can thiệp khi cần đọc giá trị thông qua refs.

Ví dụ về Uncontrolled Component:

import React, { useRef } from 'react';		
			
function UncontrolledForm() {		
	  const inputRef = useRef(null);		
			
	  const handleSubmit = (e) => {		
	    e.preventDefault();		
	    alert(`Input Value: ${inputRef.current.value}`);		
	  };		
			
	  return (		
	    <form onSubmit={handleSubmit}>		
	      <label>		
	        Name:		
	        <input type="text" ref={inputRef} />		
	      </label>		
	      <button type="submit">Submit</button>		
	    </form>		
	  );		
}		
		
export default UncontrolledForm;		

Ưu điểm của Uncontrolled Components:

• Dễ dàng sử dụng với các form đơn giản.
• Tăng hiệu suất vì không có quá nhiều re-render.
• Dễ dàng tích hợp với non-React libraries (e.g., jQuery).

Nhược điểm:

• Khó khăn trong việc validation và kiểm soát dữ liệu.
• Khó theo dõi và đồng bộ dữ liệu giữa input và React state.

4. So sánh Controlled vs Uncontrolled Components

5. Khi nào nên sử dụng Controlled và Uncontrolled Components?

Sử dụng Controlled Components khi:

• Cần kiểm soát giá trị input và thay đổi một cách linh hoạt.
• Có nhiều logic phức tạp như validation, dynamic inputs.
• Cần đồng bộ giữa nhiều input.

Sử dụng Uncontrolled Components khi:

• Form đơn giản, không yêu cầu xử lý logic nhiều.
• Hiệu suất là ưu tiên hàng đầu.
• Làm việc với third-party libraries không thuộc React.

6. Ví dụ Kết Hợp Controlled và Uncontrolled Components

Đôi khi, bạn có thể kết hợp cả hai cách để tận dụng ưu điểm của mỗi phương pháp.

import React, { useState, useRef } from 'react';		
			
function MixedForm() {		
	  const [controlledValue, setControlledValue] = useState('');		
	  const uncontrolledRef = useRef(null);		
			
	  const handleSubmit = (e) => {		
	    e.preventDefault();		
	    alert(`Controlled: ${controlledValue}, Uncontrolled: ${uncontrolledRef.current.value}`);		
	  };		
			
	  return (		
	    <form onSubmit={handleSubmit}>		
	      <label>		
	        Controlled:		
	        <input type="text" value={controlledValue} onChange={(e) => setControlledValue(e.target.value)} />		
	      </label>		
	      <br />		
	      <label>		
	        Uncontrolled:		
	        <input type="text" ref={uncontrolledRef} />		
	      </label>		
	      <br />		
	      <button type="submit">Submit</button>		
	    </form>		
	  );		
}		
			
export default MixedForm;		

7. Kết luận

Lời khuyên:

• Dùng Controlled Components cho các form phức tạp với nhiều logic.
• Dùng Uncontrolled Components cho các form đơn giản và hiệu suất cao.
• Hãy chọn phương pháp phù hợp với yêu cầu của dự án!