Tác giả: Dương Nguyễn Phú Cường
Ngày đăng: Hồi xưa đó
Trông 2 dạng form này như thế nào?
Với ai chưa đụng vào form, bước đầu tiên là hãy quan sát 2 loại forms hiển thị ở codepen bên dưới đây. Có thể dễ dàng thấy là:
| Form |
Mô tả |
| Bên trái, form dạng " Uncontrolled " |
Dù ta đã nhập 2 ô "firstName" và "lastName", nhưng chữ "fullName" chỉ hiện ra sau khi click nút Submit. |
| Bên phải, form dạng " Controlled " |
Dù nút Submit đã bị vô hiệu hóa, thì chỉ cần gõ vào 1 (hoặc cả 2) ô "firstName", ô "lastName", form sẽ tự tổng hợp ra "fullName". |
See the Pen ReactJS - Form - Controlled and Uncontrolled form (inputs)
Yeah, vậy là ít nhất ta đã có cảm giác thế nào là
controlled, thế nào là
uncontrolled. Cảm giác đó là gì? Hãy liên hệ với những thứ bên ngoài cho dễ nhớ.
| Form "uncontrolled" |
Form "controlled" |
| Là pull , giống tít ngày xưa muốn tải email mới về, ta phải vào ứng dụng, nhấn Refresh, thì thông tin mới được load về. Ở đây ta phải ấn "Submit" thì data mới được trả về. |
Là push , thời bây giờ, không cần thao tác, một khi được phép, server sẽ đẩy email mới về máy ta liên tục, chính là vụ không cần nhấn Submit. |
| Là cô y tá trực ở bên ngoài, chỉ khi bệnh nhân kéo cái dây "cấp cứu" thì mới nhảy bổ vào hỏi han có chuyện gì. |
Vẫn là cô y tá kia, giờ bằng một cách nào đấy (như cắm cảm biến chằng chịt vào bệnh nhân), nên bệnh nhân bắt đầu buồn tè là cô cũng biết. |
Nguyên lý hoạt động của 2 dạng form ra sao?
Đọc docs, hoặc xem code để biết thêm chi tiết. Đại loại là:
Với
uncontrolled form, hướng làm là:
- Sử dụng
ref để lấy dữ liệu
- Sử dụng
onClick handler để trigger hàm handleSubmitClick. Bên trong hàm handleSubmitClick (khai báo chỗ khác), ta muốn làm gì là việc của ta.
- Do tính thụ động của
onClick, ta chỉ có giá trị mới trong input khi click vào 1 thứ gì đó.
Cách này trông đơn giản, và trong sáng.
<input type="text" placeholder="first name" ref={input => this.firstName = input} />
<input type="text" placeholder="family name" ref={input => this.familyName = input} />
<button onClick={this.handleSubmitClick}>Submit</button>
Với
controlled form, hướng làm là:
- Sử dụng
onChange handler để trigger hàm handleNameChange. Trong handleNameChange, ta cập nhật giá trị trong từng ô input thông qua setState().
- Do tính chất luôn phản ứng trước bất kỳ thay đổi trong input của
onChange, kết hợp với setState(), ta luôn có được giá trị mới nhất của input mà chẳng phải đụng tay chân.
<input type="text" placeholder="first name" name="firstName" onChange={this.handleNameChange} />
<input type="text" placeholder="family name" name="familyName" onChange={this.handleNameChange} />
Ưu nhược điểm của từng dạng form?
Cần nghiên cứu thêm. Nhưng cảm nhận cá nhân là cách
uncontrolled form dùng
ref không phổ biến, không được ưu tiên sử dụng.
Lúc nào dùng form dạng nào?
Dựa vào những mô tả bên trên, ta có thể hiểu một phần gợi ý của tác giả bài viết gốc thể hiện qua bảng dưới.
Ghi chú:
- Dấu ✔️ nghĩa là dùng được
- Dấu ❌ nghĩa là không dùng được
| Tính năng cần |
uncontrolled |
controlled |
| Nhận giá trị 1 lần |
✔️ |
✔️ |
| Kiểm tra (validate) dữ liệu sau khi submit |
✔️ |
✔️ |
| Kiểm tra dữ liệu tức thời sau khi gõ xong |
❌ |
✔️ |
| Disable nút submit tùy theo điều kiện |
❌ |
✔️ |
| Ép buộc format cho dữ liệu nhập vào |
❌ |
✔️ |
| Một data, nhiều input |
❌ |
✔️ |
| Nhập dữ liệu động |
❌ |
✔️ |
