Các chế độ trong React

May 08 2022
Hướng dẫn từng bước về xây dựng các phương thức trong React A Modal là một hộp thông báo / cửa sổ bật lên được hiển thị trên đầu màn hình. Chúng được sử dụng trong các ngữ cảnh khác nhau từ cảnh báo đến đầu vào.

Hướng dẫn từng bước về cách xây dựng các phương thức trong React

Ảnh của Vincentiu Solomon trên Unsplash

Phương thức là một hộp tin nhắn / cửa sổ bật lên được hiển thị trên đầu màn hình. Chúng được sử dụng trong các ngữ cảnh khác nhau từ cảnh báo đến đầu vào. Trong blog này, chúng ta sẽ tìm hiểu cách triển khai một phương thức trong React JS.

Nếu bạn muốn tìm hiểu những điều cơ bản hoặc muốn tìm hiểu về phản ứng, hãy xem blog bên dưới

Giới thiệu về React

Tạo ứng dụng React

Hãy tạo một ứng dụng React mới

Tạo ứng dụng React

Tạo một thành phần mới trong src và nhập nó vào App.js và thêm một số văn bản và một nút trong thành phần mới. Chúng tôi có thể sử dụng Đạo cụ dành cho trẻ em để làm cho phương thức có thể sử dụng lại được. Tôi sẽ giải thích điều này trong blog tiếp theo.

Modal.js
App.js

Thêm kiểu

Để làm cho nó xuất hiện dưới dạng hộp thoại / phương thức, chúng ta hãy thêm một số kiểu cách bằng cách tạo một tệp CSS mới trong thư mục src. Nhập tệp CSS đó vào thành phần mới mà chúng tôi đã thêm.

Phong cách của thành phần phương thức

Có vẻ tốt hơn :)

Sử dụng Chức năng làm Đạo cụ:

Chúng ta cần tạo một hook useState () kiểu boolean. Trạng thái này sẽ kiểm soát xem phương thức có được hiển thị hay không. Nếu giá trị trạng thái là true, nó sẽ hiển thị phương thức khác, nó sẽ ẩn nó.

Khi người dùng nhấp vào nút đóng trong thành phần Modal, chúng ta cần thay đổi giá trị của trạng thái thành false để nó đóng lại. Chúng tôi không thể thay đổi trực tiếp trạng thái đó trong thành phần con vì trạng thái được xác định trong thành phần Cha. Chúng ta có thể tạo một hàm trong thành phần mẹ và chuyển nó làm đạo cụ cho thành phần con để giải quyết điều này. Truyền chức năng này làm chỗ dựa cho thành phần Con.

Bây giờ hãy chấp nhận hàm bằng cách khử cấu trúc nó và gắn nó vào sự kiện khi nhấp vào nút đóng để bất cứ khi nào chúng ta nhấp vào đóng, giá trị trạng thái sẽ thay đổi thành false và phương thức sẽ bị đóng.

App.js
Modal.js

Thời gian để ẩn

Bây giờ chúng ta hãy triển khai logic để ẩn phương thức bất cứ khi nào chúng ta nhấp vào đóng. Chúng tôi chỉ có thể hiển thị có điều kiện giao diện người dùng nếu nó đúng bằng cách sử dụng logic AND (&&). Sử dụng logic AND, chúng tôi sẽ chỉ hiển thị phương thức nếu nó đúng.

App.js

Hiển thị Phương thức

Theo mặc định, giá trị phương thức sẽ là false. Chúng tôi cần thêm một nút trong App.js để hiển thị phương thức khi chúng tôi nhấp vào. Chúng tôi cần thêm một nút trong App.js và đính kèm một sự kiện khi nhấp chuột sẽ thay đổi giá trị trạng thái thành true để hiển thị phương thức.

App.js

Bạn có thể tìm thấy liên kết cho mã bên dưới

Cảm ơn bạn đã đọc bài viết của tôi. Tôi sẽ rất vui khi nghe ý kiến ​​của bạn. Theo dõi tôi trên Medium để được cập nhật những bài viết mới nhất của tôi. Bạn cũng có thể kết nối với tôi trên Linkedin . Xem các blog của tôi về Học máy, Học sâu và React.

Giới thiệu về mạng nơ-ron hợp pháp

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved