Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Hiểu về Form và Sự kiện trong React

by
Read Time:5 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này, bạn sẽ tìm hiểu về form và các sự kiện trong React. Chúng ta sẽ bắt đầu bằng cách tạo ra một ứng dụng đơn giản dựa trên React và sau đó thêm một form và một số phần tử. Sau đó, chúng ta sẽ xem cách thêm sự kiện vào các phần tử của form.

Nếu bạn là người mới bắt đầu với React, tôi khuyên bạn nên đọc hướng dẫn giới thiệu về React để làm quen.

Bắt đầu

Hãy bắt đầu bằng cách thiết lập ứng dụng web React của chúng ta. Tạo một thư mục dự án gọi là ReactFormApp. Bên trong ReactFormApp, hãy tạo một tập tin gọi là index.html và thêm mã HTML sau đây:

Khởi tạo dự án sử dụng Node Package Manager (npm).

Điền vào các chi tiết theo yêu cầu và bạn sẽ có tập tin package.json trong thư mục ReactFormApp.

Cài đặt các phụ thuộc reactreact-dom sử dụng npm.

Cài đặt gói babel theo yêu cầu bằng cách sử dụng npm và lưu nó vào tập tin package.json.

Các gói babel được yêu cầu để chuyển đổi mã JSX sang JavaScript.

Tạo một tập tin cấu hình webpack để xử lý các cấu hình webpack. Tạo một tập tin gọi là webpack.config.js, và thêm các cấu hình sau:

app.js là tập tin nơi chứa code React của chúng ta. Tạo một tập tin gọi là app.js bên trong thư mục ReactFormApp. Nhập các thư viện react cần thiết trong app.js. Tạo một thành phần gọi là App có một div cùng với một số văn bản. Kết xuất thành phần bằng cách sử dụng phương thức render. Tập tin app.js cơ bản sẽ trông như sau:

Lưu các thay đổi và thử tải lại máy chủ phát triển webpack.

Một khi máy chủ đã được khởi động lại, bạn sẽ có thể xem ứng dụng React chạy trên http://localhost:8080/.

React Form App Display ScreenReact Form App Display ScreenReact Form App Display Screen

Tạo một Form React

Chúng ta có ứng dụng React cơ bản có thể chạy được, hãy chuyển sang bước tiếp theo và thử tạo ra một thành phần form sử dụng code JSX trong app.js.

Tạo một thành phần gọi là FormComp trong app.js.

Bên trong hàm render cho FormComp, chúng ta sẽ xác định các code HTML cho việc tạo ra một form. Chúng ta sẽ đặt vào đó một vài label, input và một button. Nó sẽ trông như thế này:

Kết xuất thành phần form FormComp để hiển thị form bên trong index.html.

Lưu các thay đổi và khởi động lại máy chủ webpack và bạn sẽ có thể thấy form.

React App Form TutorialReact App Form TutorialReact App Form Tutorial

Thêm các sự kiện vào Form

Form React của chúng ta trông khá tốt. Để làm cho nó có thể tương tác, chúng ta cần thêm sự kiện vào form.

Chúng ta sẽ bắt đầu bằng cách thêm các biến trạng thái vào mỗi input, từ đó chúng ta có thể đọc các giá trị của input. Hãy thiết lập các biến trạng thái cho input first name và last name.

Hãy chắc chắn đặt trạng thái ban đầu cho các biến nêu trên. Xác định hàm getInitialState bên trong form FormComp và khởi tạo cả hai biến.

Chúng ta cần xử lý sự kiện on-change của các input và gán cho các biến trạng thái khi giá trị trong input thay đổi. Vậy hãy định nghĩa một sự kiện onChange trên các input.

Xác định các hàm onChange bên trong FormComp và thiết lập các biến trạng thái.

Hãy thử kết xuất các biến trạng thái bằng cách sử dụng chúng. Bên trong mã HTML của FormComp, thêm phần tử sau.

Lưu các thay đổi và khởi động lại máy chủ webpack. Thử nhập một số văn bản bên trong hộp văn bản First name và Last name, và bạn sẽ có thể xem kết quả ngay khi bạn gõ.

React Form App Form Fill React Form App Form Fill React Form App Form Fill

Tiếp theo, thêm một sự kiện on-click vào nút submit mà chúng ta có trong form của chúng ta.

Định nghĩa hàm handleClick bên trong thành phần FormComp. Khi nhấp vào nút submit, chúng ta sẽ nối first name và last name và hiển thị full name bên trong form. Dưới đây là hàm handleClick:

Đồng thời, khởi tạo biến Name trong hàm getInitialState.

Hiện thị full name đã được nối trong form HTML.

Thành phần FormComp hoàn chỉnh sẽ trông như thế này:

Lưu lại các thay đổi ở trên và khởi động lại máy chủ. Nhập cả hai trường name và nhấn nút submit, và full name sẽ được hiển thị.

Tổng kết

Trong hướng dẫn React này, bạn đã học cách làm quen với việc tạo các ứng dụng React và hiểu những khái niệm cơ bản về cách làm việc với form và sự kiện trong một ứng dụng web dựa trên React. Tôi hy vọng hướng dẫn này sẽ thật sự hữu ích cho bạn trong việc làm quen với việc tạo các ứng dụng dựa trên React.

Mã nguồn cho bài viết này sẵn có trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ, đề xuất hoặc bất kỳ điều chỉnh nào trong phần bình luận bên dưới nhé. Hãy tiếp tục đọc thêm các hướng dẫn về React.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.