React Forms

Giống như trong HTML, React sử dụng các form để cho phép người dùng tương tác với trang web.

Thêm các Form trong React

Chúng ta thêm một form với React giống như bất kỳ phần tử nào khác:

Ví dụ sau sẽ thêm vào một form để cho phép người dùng nhập tên của họ:

Đoạn code này sẽ hoạt động như bình thường, form sẽ được gửi và trang web sẽ được làm mới.

Nhưng đây thường không phải là điều chúng ta muốn xảy ra trong React.

Chúng ta muốn ngăn chặn hành vi mặc định này và cho phép React kiểm soát form.

Xử lý các Form

Xử lý các form là cách chúng ta xử lý dữ liệu khi nó thay đổi giá trị hoặc được gửi.

Trong HTML, dữ liệu của form thường được xử lý bởi DOM.

Trong React, dữ liệu của form thường được xử lý bởi các component.

Khi dữ liệu được xử lý bởi các component, tất cả các dữ liệu được lưu trữ trong component state.

Chúng ta có thể kiểm soát các thay đổi bằng cách thêm hàm xử lý sự kiện trong thuộc tính onChange.

Chúng ta có thể sử dụng useState Hook để theo dõi giá trị của mỗi input và cung cấp một "nguồn thông tin chính xác duy nhất" cho toàn bộ ứng dụng.

Ghi chú: Hãy xem phần React Hook để biết thêm thông tin về Hook.

Ví dụ sau sẽ sử dụng useState Hook để quản lý các input:

Gửi các Form

Chúng ta có thể kiểm soát hành động gửi dữ liệu bằng cách thêm một hàm xử lý sự kiện trong thuộc tính onSubmit của phần tử <form>:

Ví dụ sau sẽ thêm một submit button và một hàm xử lý sự kiện trong thuộc tính onSubmit:

Nhiều trường input

Chúng ta có thể kiểm soát giá trị của nhiều trường input bằng cách thêm thuộc tính name vào mỗi phần tử.

Chúng ta sẽ khởi tạo state với một đối tượng rỗng.

Để truy cập các trường trong hàm xử lý sự kiện chúng ta sử dụng cú pháp event.target.name và event.target.value.

Để cập nhật state, chúng ta sử dụng cặp dấu ngoặc vuông xung quanh tên của thuộc tính.

Ví dụ sau sẽ viết một form với hai trường input:

Ghi chú: Chúng ta sử dụng cùng một hàm xử lý sự kiện cho cả hai trường input, chúng ta có thể viết hàm xử lý sự kiện cho mỗi input, nhưng điều này mang lại cho chúng ta code sạch hơn nhiều và là cách ưa thích trong React.

Textarea

Phần tử textarea trong React hơi khác so với HTML thông thường.

Trong HTML, giá trị của một textarea là đoạn văn bản ở giữa thẻ bắt đầu <textarea> và thẻ kết thúc </textarea>.

Trong React giá trị của một textarea được đặt trong thuộc tính value. Chúng ta sẽ sử dụng useState Hook để quản lý giá trị của textarea:

Ví dụ sau là một textarea đơn giản với một số nội dung:

Select

Một danh sách thả xuống, hay còn gọi là một select box, trong React cũng có một chút khác biệt so với HTML.

Trong HTML, giá trị được chọn trong danh sách thả xuống được định nghĩa với thuộc tính selected:

Trong React, giá trị được chọn được định nghĩa với thuộc tính value trong thẻ select:

Ví dụ sau là một select box đơn giản, ở đó giá trị được chọn "Volvo" được khởi tạo trong constructor:

Bằng cách thực hiện những thay đổi nhỏ này đối với <textarea> và <select>, React có thể xử lý tất cả các phần tử input theo cùng một cách.