Question 1

Controlled component trong React là gì?

Accepted Answer

Controlled component là một phần tử form có giá trị được quản lý bởi state của React thông qua prop value và handler onChange. Điều này có nghĩa là React trở thành nguồn dữ liệu đáng tin cậy duy nhất. Khác với uncontrolled components nơi DOM tự quản lý giá trị của mình, controlled components cho phép kiểm soát hoàn toàn dữ liệu form và hỗ trợ xác thực theo thời gian thực.

Question 2

Làm thế nào để tạo một controlled input trong React?

Accepted Answer

Controlled input yêu cầu hai yếu tố thiết yếu: prop value được gắn kết với state của React và handler onChange để cập nhật state đó. Nếu không có onChange, input sẽ ở chế độ chỉ đọc vì React sẽ ngăn chặn mọi thay đổi. Cách tiếp cận này đảm bảo state của React luôn đồng bộ với giá trị hiển thị trong input, cho phép xác thực tức thì hoặc biến đổi dữ liệu.

Question 3

Sự khác biệt giữa controlled component và uncontrolled component là gì?

Accepted Answer

Sự khác biệt cơ bản nằm ở nguồn dữ liệu đáng tin cậy. Controlled component lưu trữ giá trị trong state của React (nguồn dữ liệu đáng tin cậy duy nhất), trong khi uncontrolled component cho phép DOM quản lý giá trị của riêng nó, có thể truy cập qua ref. Controlled components cung cấp nhiều quyền kiểm soát hơn và hỗ trợ xác thực theo thời gian thực, nhưng uncontrolled components có thể đơn giản hơn cho các form cơ bản không cần xác thực phức tạp.

Biểu mẫu và Controlled Components

Controlled component trong React là gì?

Câu trả lời

Làm thế nào để tạo một controlled input trong React?

Câu trả lời

Sự khác biệt giữa controlled component và uncontrolled component là gì?

Câu trả lời

Làm thế nào để quản lý nhiều controlled input trong cùng một form?

Làm thế nào để tạo một controlled checkbox trong React?

Các chủ đề phỏng vấn React / Next.js khác

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Data Fetching trong Next.js

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Kiểm thử React

Zustand State Management

Tối ưu hiệu năng React

Error Boundaries & Error Handling

Advanced React Patterns

Tính năng nâng cao của Next.js

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo