Chương 2 - Bài 1. Phân biệt Form Uncontrolled và Controlled trong ReactJS

Trông 2 dạng form này như thế nào?

See the Pen ReactJS - Form - Controlled and Uncontrolled form (inputs)

Nguyên lý hoạt động của 2 dạng form ra sao?

• 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ì đó.

<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>

• 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?

Lúc nào dùng form dạng nào?

• Dấu ✔️ nghĩa là dùng được
• Dấu ❌ nghĩa là không dùng được