Xác thực phương thức phản ứng-bootstrap
Đó là nó từ hướng dẫn này. Bạn có thể tiếp tục học hỏi điều này và thay vì chỉ đóng phương thức, bạn có thể thực hiện những việc khác như chuyển các giá trị biểu mẫu tới máy chủ của mình, thêm chức năng theo dõi, v.v. Là nhà phát triển JavaScript, bạn phải hiểu cách sử dụng lệnh gọi lại và bổ sung các chức năng bổ sung thay vì hành vi mặc định—trong trường hợp này là đóng phương thức khi gửi biểu mẫu Show Trong Giai đoạn 4 của tôi tại Trường Flatiron, tôi đã gặp React lần đầu tiên và bị choáng ngợp bởi sự đa dạng cũng như chức năng của nó. Tương tự như Vanilla Javascript với Bootstrap để giúp tạo kiểu, React cũng có React-Bootstrap, tạo các thành phần từ đầu như một thành phần React thực sự. React-Bootstrap Modal Forms được sử dụng khá phổ biến trong các ứng dụng front-end. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách
Bây giờ, hãy bắt đâù Cài đặt React-BootstrapCó hai cách để cài đặt React-Bootstrap, nhưng tôi thích sử dụng cách đầu tiên hơn
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Nhập các thành phần React-BootstrapTrước hết, Thành phần Phương thức là gì? Bây giờ, hãy nhập Thành phần phương thức của chúng tôi từ React-Bootstrap
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Một Modal có 3 phần cơ bản. Đầu trang, Nội dung, Chân trang. Mỗi phần (hoặc thành phần phụ) chứa thông tin chúng tôi muốn hiển thị trên DOM của chúng tôi Để khai báo một thành phần con cụ thể của Modals, chúng ta có thể sử dụng 6
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Hoặc chúng ta cũng có thể khai báo từng thành phần con bằng cách nhập riêng chúng từ React-Bootstrap
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Thành phần ModalForm của chúng tôi sẽ được thay đổi thành này
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Vậy là chúng ta đã hoàn thành phần khung cơ bản của Modal Component. Thời gian để làm cho nó tương tác hơn Hiện/Ẩn Modal FormBiểu mẫu phương thức được hiển thị/ẩn khỏi giao diện người dùng bằng cách sử dụng thuộc tính 0. Ban đầu, tôi đã mã hóa cứng giá trị thành 1 nhưng trong một ứng dụng phản ứng thực tế, chúng tôi sẽ cần thêm logic để chuyển đổi thuộc tính 0 của mìnhTrong 3 của chúng tôi
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đặt trạng thái ban đầu của isOpen thành false cho biết ModalForm của chúng tôi chưa được kích hoạt và đúng với biểu mẫu đã kích hoạt 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Có thể bạn quan tâmTôi đã khai báo 3 chức năng. 4 để đặt isOpen thành true khi biểu mẫu phương thức được kích hoạt, 5 để đóng biểu mẫu phương thức và cũng bao gồm biểu mẫu phương thức ternary để hiển thị có điều kiện trên thành phần Ứng dụngBây giờ, hãy thêm các thành phần phụ Biểu mẫu của chúng ta vào ModalForm để biến nó thành một biểu mẫu bên trong phương thức của chúng ta 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Trong thành phần ModalForm, tôi đã thêm trạng thái ban đầu của tên và đặt thành null, giá trị đầu vào của biểu mẫu của chúng tôi được lưu trữ ở trạng thái này. Thuộc tính 0 của chúng tôi hiện được liên kết với trạng thái 7, được kế thừa từ Ứng dụng. Thuộc tính 8 mới là cần thiết nếu bạn muốn thoát khỏi biểu mẫu phương thức bằng cách nhấn phím esc hoặc nhấp vào phông nền không tĩnhĐối với các thành phần phụ Biểu mẫu mới được thêm của chúng tôi, tôi đã thêm thuộc tính 9 và 0 để tạo biểu mẫu được kiểm soát (đọc thêm về biểu mẫu được kiểm soát/không được kiểm soát tại đây). Trong 1, tôi cũng đã thêm hàm 2 để xử lý giá trị đầu vào của biểu mẫu và gửi lại cho Ứng dụngÁp dụng CSS cơ bản trên Modal FormÁp dụng kiểu dáng cơ bản cho biểu mẫu phương thức của chúng tôi 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 3 và 4 là một cú pháp ngắn hơn để khai báo các đoạn trong phản ứng. Tôi cũng đã thêm thuộc tính 5 vào quảng cáo Thành phần phương thức của chúng tôi, đặt thuộc tính đó thành 6. Bằng cách này, biểu mẫu phương thức của chúng tôi sẽ không bị đóng khi nhấn phím esc hoặc nhấp vào phông nền không tĩnhPhần kết luậnReact-Bootstrap là một công cụ rất mạnh dành cho nhà phát triển, bạn đang tận dụng tối đa cả hai thế giới về mặt kỹ thuật. Đối với Modal, bên cạnh việc tạo ra một dạng modal, có thể có rất nhiều loại modal khác nhau (ví dụ:. phương thức lưới, phương thức trung tâm, kích thước tùy chọn, v.v.) |