React.js 14 – Thao tác với Form trong React

0
225

Các phần tử form là thứ cực kỳ hữu ích trong bất kỳ ứng dụng web nào. Không giống như trong Angular việc xử lý Form đã có các mẫu sẵn còn với React bạn phải tự xử lý form. Điều này mang lại nhiều thứ phức tạp để làm sao bạn có được dữ liệu từ Form, làm cách nào để quản lý state của form…

Trong React có 2 loại form  đó là uncontroller input và controller input.

uncontroller input giống như các  dạng Input HTML truyền thống, nó sẽ lưu trữ những gì bạn gõ. Để lấy được giá trị được lưu trữ chúng ta sử dụng ref.

Các controller input là một component React sẽ kiểm soát những gì sẽ xảy ra trong form. Có nghĩa là khi giá trị input thay đổi giá tri input cũng thay đổi, component phát hiện thay đổi và lưu giá trị vào state của nó.

Trong phần này chúng ta sẽ tìm hiểu về controller input

Cập nhật các giá trị trong phần tử form

Trong React các giá trị của phần tử form được kiểm soát bởi state ở component đấy.

Thường thì React sẽ không tự biết được giá trị của phần tử form nào thay đổi mà phải thông qua một số trình xử lý sự kiến trong form như “onChange, onBlur …”.

Ví dụ:

File DemoForm.js

Với ví dụ trên khi các bạn nhập thông tin vào ô input, sự kiện onChange sẽ được kích hoạt đồng thời sẽ gọi tới phương thức xử lý sự kiện handleChange để xử lý.

Khi phương thức handleChange được gọi sẽ tiến hành cập nhật lại giá trị của state.email  bằng phương thức setState.

Xử lý nhiều input cùng lúc

Trong hầu hết các trường hợp, chúng ta sẽ có nhiều hơn một ô input nhập. Chúng ta sẽ cần một cách để nắm bắt tất cả các input bằng một phương thức xử lý thay vì khai báo nhiều phương thức. Dó đó tôi sẽ thay đổi handleChange lại như dưới đây.

Ví dụ:

File DemoForm.js

Kết quả

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây