当前位置：首页 > news >正文

Web开发基础学习——通过React示例学习模态对话框

news 来源：原创 2025/5/15 3:09:32

Web开发基础学习系列文章目录

第一章基础知识学习之通过React组件学习模态对话框

文章目录

Web开发基础学习系列文章目录
前言
一、创建新的 React 应用
二、创建模态对话框组件
三、修改 App.js
四、添加样式
五、启动应用
六、访问应用
总结

前言

模态对话框（Modal Dialog）是一种用户界面元素，它在当前窗口上显示一个对话框，要求用户与之交互后才能返回到主界面。模态对话框通常用于获取用户输入、显示重要信息或确认用户操作。它会阻止用户与主界面进行交互，直到对话框被关闭。

特点

阻止交互：在模态对话框打开时，用户无法与主界面的其他部分进行交互。
集中注意力：模态对话框通常用于需要用户集中注意力的操作，如表单填写、确认删除等。
覆盖主界面：模态对话框通常会覆盖主界面的部分或全部内容，通常带有半透明的背景遮罩。

下面是一个简单的 React 示例，展示如何创建和使用模态对话框（Modal）。这个示例包括一个按钮来打开模态对话框，并且可以关闭它。

一、创建新的 React 应用

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。然后，可以使用 Create React App 来初始化一个新的项目。

npx create-react-app my-modal-app
cd my-modal-app

二、创建模态对话框组件

在 src 文件夹中创建一个新的文件 Modal.js，并添加模态对话框的代码。

import React from 'react';
import './Modal.css';function Modal({ onClose }) {return (<div className="modal-overlay"><div className="modal"><h2>这是一个模态对话框</h2><p>你可以在这里添加任何内容。</p><button onClick={onClose}>关闭</button></div></div>);
}export default Modal;

三、修改 App.js

用以下代码替换 src/App.js 的内容，以加入模态对话框的功能。

import React, { useState } from 'react';
import Modal from './Modal';
import './App.css';function App() {const [isModalOpen, setModalOpen] = useState(false);const openModal = () => {setModalOpen(true);};const closeModal = () => {setModalOpen(false);};return (<div className="App"><h1>模态对话框示例</h1><button onClick={openModal}>打开模态对话框</button>{isModalOpen && <Modal onClose={closeModal} />}</div>);
}export default App;

四、添加样式

创建两个样式文件，分别为 App.css 和 Modal.css。

src/App.css

.App {text-align: center;padding: 20px;
}button {padding: 10px 20px;font-size: 16px;
}

src/Modal.css

.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}.modal {background: white;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

五、启动应用

确保你在项目目录下，然后运行以下命令启动应用：
npm start

六、访问应用

打开浏览器并访问 http://localhost:3000，你应该能看到一个页面，包含一个按钮，点击该按钮会打开模态对话框。

总结

HTML 提供网页的结构和内容。
CSS 控制网页的外观和样式。
JavaScript 为网页添加动态交互和功能。
这三者相辅相成，共同构建出丰富多彩的网页体验。

Web开发基础学习——通过React示例学习模态对话框

Web开发基础学习系列文章目录第一章基础知识学习之通过React组件学习模态对话框文章目录 Web开发基础学习系列文章目录前言一、创建新的 React 应用二、创建模态对话框组件三、修改 App.js四、添加样式五、启动应用六、访问应用总结前言模态对话框（Modal D…...

编程日记 2025/5/15 3:09:32

实例分割详解

实例分割详解引言实例分割是计算机视觉领域的一项复杂任务，它要求模型能够识别图像中不同类别的对象，并对每个单独的对象进行像素级别的分类。与语义分割不同的是，实例分割不仅要区分不同的类别，还要识别同一类别中的不同个体…...

编程日记 2025/5/15 2:49:38

Flink四大基石之State(状态) 的使用详解

目录一、有状态计算与无状态计算 （一）概念差异 （二）应用场景二、有状态计算中的状态分类 （一）托管状态（Managed State）与原生状态（Raw State） 两者的…...

编程日记 2025/5/11 10:57:05

vue深入理解输入框字符限制的优化设计

文章目录深入理解输入框字符限制的优化设计背景与挑战输入框限制的重要性常见需求多种实现方法解析方法一：基于实时过滤的字符限制方法二：借助正则验证方法三：提交时二次校验性能优化无障碍设计延伸场景与最佳实践1. 多语言国际化支持2. 动…...

编程日记 2025/5/15 1:32:58

MySQL的子查询

SQL语句中嵌套select语句,嵌套查询案例： select * from t1 where column1 (select column1 from t2); 补： 1.子查询外部的语句可以是insert/update/delete/select的任何一个 2.位置也可以在where/from/select之后类型： 1.标量子查询…...

编程日记 2025/5/15 1:17:34

Kubernetes架构原则和对象设计

云原生学习路线导航页（持续更新中） 快捷链接 Kubernetes常见问题解答本文从 Google Borg系统的架构设计开始，深入讲解Kubernetes架构及组件的基本原理 1.什么是云计算 1.1.传统行业应用假设有10台服务器，两个应用。小规模管…...

编程日记 2025/5/15 2:46:41

npm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本

要以管理员身份打开PowerShell，请按照以下步骤操作： 在Windows搜索框中查找PowerShell： 在任务栏上，点击左下角的Windows徽标（或按Win S键）以打开搜索框。输入“PowerShell”以查找PowerShell应用程序。右…...

编程日记 2025/5/11 9:40:33

Linux CentOS

阿里云开源镜像下载链接 https://mirrors.aliyun.com/centos/7/isos/x86_64/ VMware 安装 CentOS7 自定义下一步选择稍后安装操作系统选择输入查看物理机CPU内核数量 CtrlShiftEsc 总数不超过物理机内核数量推荐内存自选推荐推荐默认拆分成多个默认自定义硬件…...

编程日记 2025/5/15 1:24:52

如何用注册机破解Reflexive游戏

相信有许多小朋友（像我以前一样）已经迫不及待地准备准备对浩瀚的、像三星堆一般的Reflexive游戏合集进行考古挖掘工作了。不巧的是，打开游戏之后发现常常提示要付费才能解锁完整版。一、下载注册机与破解文件首先，在我的永硕网…...

编程日记 2025/5/15 1:17:55

【算法day7】字符串：反转与替换

题目引用反转字符串反转字符串II替换数字 1.反转字符串编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。示例 1&am…...

编程日记 2025/5/15 1:03:14

基于Linux C++多线程服务器 + Qt上位机开发 + STM32 + 8266WIFI的智慧无人超市

前言针对传统超市购物车结账排队时间长、付款效率低的问题，提出了一种更符合现代社会人们购物方式-基于RFID的自助收银系统。习惯了快节奏生活的人们都会选择自助收银机结账，理由显而易见：自助收银机结账很方便，几乎不用排队&am…...

编程日记 2025/5/14 15:39:36

继电器测试的培训和学习资源有哪些推荐？

继电器是电气控制设备中常见的一种元件，用于实现电路的开关控制和保护功能。对于从事电气相关工作的人员来说，掌握继电器的测试技能是非常重要的。以下是一些推荐的继电器测试培训和学习资源： 1. 在线课程：许多在线学习平台提供了…...

编程日记 2025/5/14 17:58:18

作业 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QPushButton,QLineEditfrom Form import Ui_Form from second import Ui_second from PySide6.QtCore import Qtclass MyWidget(QWidget,Ui_Form):def __init__(self):super().__init__()self.setupUi(se…...

编程日记 2025/5/15 2:05:14

小迪安全笔记第四十四天 sql盲注实战利用sql盲注进行漏洞的利用

sql盲注的分类什么是盲注就是我们什么也不知道的情况下进行的注入前边的注入都是简单的注入我们猜测数据类型之后可以直接 union 去查这种情况多用于数据库增删查改中的查 bool盲注也用于查这个的情况的就是我们前边都试了没有用就需要…...

编程日记 2025/5/14 23:10:36

AMEYA360：上海永铭电子全新高压牛角型铝电解电容IDC3系列，助力AI服务器电源高效运转

随着数据中心和云计算的高速发展，AI服务器的能效要求日益提高。如何在有限空间内实现更高的功率密度和稳定的电源管理，成为AI服务器电源设计的一大挑战。永铭推出全新高压牛角型铝电解电容IDC3系列，以大容量、小尺寸的创新特性，为…...

编程日记 2025/5/14 13:48:14

SpringBoot Web 开发请求参数

SpringBoot Web 开发请求参数简单的 web 请求： @RestController public class HelloController {@RequestMapping("sayHello")public String sayHello(){System.out.println("Hello World");return "hello world";} }获取请求参数简单参数…...

编程日记 2025/5/15 1:30:42

力扣92.反转链表Ⅱ

题目描述题目链接92. 反转链表 II 给你单链表的头指针 head 和两个整数 left 和 right ，其中 left < right 。请你反转从位置 left 到位置 right 的链表节点，返回反转后的链表。示例 1： 输入：head [1,2,3,4,5], left …...

编程日记 2025/5/15 0:20:42

网络安全、Web安全、渗透测试之笔经面经总结（一）

本篇文章总结涉及以下几个方面： 一：对称加密非对称加密？ 对称加密：加解密用同一密钥，密钥维护复杂n（n-1）/2，不适合互联网传输密钥，加解密效率高。应用于加密数据。非…...

编程日记 2025/5/15 1:32:58

11 设计模式之代理模式（送资料案例）

一、什么是代理模式？ 在现实生活中，我们常常遇到这样的场景：由于某些原因，我们可能无法亲自完成某个任务，便会委托他人代为执行。在设计模式中，代理模式就是用来解决这种“委托”问题的&#xff0…...

编程日记 2025/5/15 2:38:09

matlab2024a安装

1.开始安装 2.点击安装 3.选择安装密钥 4.接受条款 5.安装密钥 21471-07182-41807-00726-32378-34241-61866-60308-44209-03650-51035-48216-24734-36781-57695-35731-64525-44540-57877-31100-06573-50736-60034-42697-39512-63953 6 7.选择许可证文件 8.找许可证文件 9.选…...

编程日记 2025/5/15 2:28:41

齐护机器人ModbusRTU RS485转TTL通信模块与ESP32 Arduino通信可Mixly的图形化编程Scratch图形化编程

齐护机器人ModbusRTU RS485-TTL通信模块一、概念理解 Modbus协议是一种由Modicon公司（现为施耐德电气Schneider Electric）于1979年发表的网络通信协议，旨在实现可编辑逻辑控制器（PLC）之间的通信。 1.1 什么是Mod…...

编程日记 2025/5/15 2:25:25

JDK、JRE、JVM的区别

JDK（Java Development Kit）、JRE（Java Runtime Environment）和JVM（Java Virtual Machine）是Java技术栈中的三个核心组件，它们各自有不同的功能和用途： 1. JDK（Java Deve…...

编程日记 2025/5/11 23:07:12

linux基础2

声明！ 学习视频来自B站up主泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&#…...

编程日记 2025/5/15 2:54:47

vue 项目实现阻止浏览器记住密码

在各个浏览器中，登录输入密码一般都会弹出是否记住密码的功能，如果记住之后，会在各个密码框自动填充记住的密码，这无疑是一种不安全的操作，所以要实现禁用阻止浏览器记住密码的行为查阅资料，也得到很多…...

编程日记 2025/5/14 17:22:34

【23种设计模式】工厂模式：理论剖析与Java实践

文章目录工厂模式：理论、Java 实现与实践应用一、工厂模式概述二、简单工厂模式（一）理论介绍（二）代码实现（三）关键步骤（四）流程图三、工厂方法模式（一&…...

编程日记 2025/5/14 17:20:06

（补充）JSON在Java后端的应用

JSON在Java后端的应用本篇介绍本篇文档不涉及到写一个JSON字符串，只是介绍如何在后端实现JSON字符串和Java对象的相互转换 Java对象转换为JSON字符串在Java中，可以使用一个第三方工具包Jackson将Java对象转换为JSON对象，假设现在有一个…...

编程日记 2025/5/15 1:29:28

使用 Apache Commons IO 实现文件读写

在 Java 编程中，文件读写是常见的操作。虽然 Java 标准库提供了基本的文件 I/O 功能，但使用 Apache Commons IO 库可以进一步简化这些操作，提高开发效率。Apache Commons IO 是一个强大的工具库，提供了许多实用的类和方法&#xf…...

编程日记 2025/5/15 2:33:20

AWS ECS Task 添加 Prometheus 监控采集配置详细指南

以下是一篇完整的博文，介绍如何在 AWS ECS 环境中实现 JVM 监控。 AWS ECS 环境下的 JVM 监控实践概述在 AWS ECS (Elastic Container Service) 环境中监控 Java 应用性能是一项重要任务。本文将详细介绍如何使用 AWS Distro for OpenTelemetry (ADOT) 结合 Spring Boot …...

编程日记 2025/5/15 1:17:55

Vue+vite 组件开发的环境准备

一.nodejs安装进入Node.js 官网（Node.js — Run JavaScript Everywhere），点击下载。双击打开，进行安装双击打开后，点击 next（下一步）,后面也是一直点击 next 无其他设置，直到 …...

编程日记 2025/5/15 1:26:07

STM32 进阶定时器:1系统定时器系统中断案例 LED闪烁

定时器： 功能从高到低： TIM1和TIM8 高级控制定时器：输出能力更强，刹车控制、死区时间。 TIMx 通用定时器：可以输出PWM方波 TIM6和TIM7 基本定时器：只能计时系统定时器系统定时器（SysTic…...

编程日记 2025/5/15 0:42:13

基于微信小程序的教学质量评价系统

私信我获取源码和万字论文，制作不易，感谢点赞支持。基于微信小程序的教学质量评价系统摘要随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了基于微信小程序的教学质量评价系统的开发全过…...

编程日记 2025/5/15 2:53:33

Qt Qtablewidget 标题 QHeaderView 增加可选框 QcheckBox

创建自定义QHeaderView #pragma once#include <QObject> #include <QHeaderView> #include <QPainter> #include <QMouseEvent>class SSHeaderView : public QHeaderView {Q_OBJECTprivate:bool isChecked;int m_checkColIdx; public:SSHeaderView(i…...

编程日记 2025/5/12 21:51:30

在CentOS上无Parallel时并发上传.wav文件的Shell脚本解决方案

在CentOS上无Parallel时并发上传.wav文件的Shell脚本解决方案背景概述解决方案脚本实现脚本说明使用指南注意事项在CentOS操作系统环境中，若需并发上传特定目录下的.wav文件至HTTP服务器，而系统未安装GNU parallel工具，我们可通过其他方法实现此需求。本文将介绍一种利用Sh…...

编程日记 2025/5/13 7:10:20

实战ansible-playbook(四) -文件操作重定向/追加

原始命令： ----------阶段1--------------- apt-get update -y apt install nano vim iputils-ping net-tools dialog gcc apt-utils make -y systemctl stop unattended-upgradessystemctl disable unattended-upgradesecho APT::Periodic::Update-Package-Lists "1&qu…...

编程日记 2025/5/15 0:59:58

嵌入式 C 编程必备(7)：const 关键字 —— 打造稳定的常量空间

目录一、const关键字的基本含义与用法 1.1. 修饰基本数据类型 1.2. 修饰指针 1.3. 修饰数组 1.4. 修饰结构体二、const关键字在嵌入式编程中的优势 2.1. 提升代码可读性 2.2. 增强代码安全性 2.3. 优化内存使用 2.4. 促进模块化设计 2.5. 支持静态分析和测试三、…...

编程日记 2025/5/11 5:49:36

电脑显示没信号显示屏不亮怎么办?电脑没信号解决方法

电脑没信号显示屏不亮这种故障的原因可能有多种，例如显示器的供电、连接、设置等问题，或者电脑的显卡、内存、硬盘、主板等硬件问题。所以我们想要解决这个问题，也是需要多方面排除找到具体原因然后进行修复。下面将为大家介绍一些常见的电脑…...

编程日记 2025/5/10 1:03:47

C++零基础入门：运算符与表达式详解 —— 树莓派Pico编程应用

C语言作为信息学奥赛的指定语言，广泛应用于嵌入式开发、系统编程、游戏开发等领域。对于初学者而言，掌握基本的运算符和表达式是进行编程的基础，而这些基础知识能够帮助你解决各种实际问题。本文将带你深入理解C中的运算符与表达式&#xff0…...

编程日记 2025/5/15 2:06:30

mvc命令

命令 mvc MVC(Model-View-Controller)是一种软件架构模式,用于组织和管理应用程序的代码mvc重要的三部分 (1)‌模型（Model）‌：负责存储系统的中心数据，提供访问数据的函数，封装了应用程序的功能内核。 (2)视图&…...

编程日记 2025/5/15 1:24:52

Kafka-创建topic源码

一、命令创建topic kafka-topics --create --topic quickstart-events --bootstrap-server cdh1:9092 --partitions 2 --replication-factor 2 二、kafka-topics脚本 exec $(dirname $0)/kafka-run-class.sh org.apache.kafka.tools.TopicCommand "$" 脚本中指定了…...

编程日记 2025/5/15 2:53:33

如何开展单元测试

1、是什么单元测试（Unit Testing）又称为模块测试，是针对程序模块来进行正确性检验的测试工作。程序模块是软件设计的最小单位，程序单元是应用的最小可测试部件 • 在面向过程编程中，一个单元就是单个程序、函数、过…...

编程日记 2025/5/13 21:14:10

网络练级宝典-＞ UDP传输层协议

目录传输层端口号端口号和进程的关系 UDP协议 UDP协议格式 UDP数据封装： UDP数据分用： 面向数据报 UDP的缓冲区 UDP的缺点基于UDP的应用层协议传输层端口号我们知道端口号对应的其实就是一个进程的pid，在操作系统中二者的…...

编程日记 2025/5/15 1:09:28

【Elasticsearch】07-ES聚合

1. 桶桶（Bucket）聚合：用来对文档做分组 TermAggregation：按照文档字段值分组，例如按照品牌值分组、按照国家分组Date Histogram：按照日期阶梯分组，例如一周为一组，或者一月为一组…...

编程日记 2025/5/15 2:07:35

Unity 画线（UILineRenderer）

实现以鼠标点击点作为起点创建UILineRenderer 并记录起点。 GameObject go new GameObject(); go.transform.parent transPaint; go.transform.localPosition Vector3.zero; line go.AddComponent<UILineRenderer>(); line.LineWidth widthLine; line.color col…...

编程日记 2025/5/15 2:50:50

【Linux测试题】

1. 选择题题目： 如果想将电脑中Windows C盘（hd1）安装在Linux文件系统的/winsys目录下，请问正确的命令是（）。选项： A. root104.123.123.123:~# mount dev/hd1 /winsys B. root104.123.123.12…...

编程日记 2025/3/23 7:16:37

什么是快速傅里叶变换？

一、FFT概念快速傅里叶变换（Fast Fourier Transform，FFT）是一种高效计算离散傅里叶变换（Discrete Fourier Transform，简称DFT）及其逆变换的算法。DFT和FFT都是音频处理、图像分析、振动分析、无线通信等许…...

编程日记 2025/5/14 23:57:56

android-studio开发第一个项目，并在设备上调试

恭喜你成功安装并配置好了 Android Studio！下面是开发你的第一个 Android 项目并在设备上调试的详细步骤： 1. 启动 Android Studio 首先，启动 Android Studio。你可以通过以下几种方式启动： 使用桌面快捷方式（如果已…...

编程日记 2025/5/9 21:42:34

深入浅出：php-学习入门全攻略

文章目录 1. 为什么选择 PHP？2. 安装 PHP 环境2.1 Windows 系统安装步骤 1：下载 PHP步骤 2：解压并配置步骤 3：配置环境变量步骤 4：验证安装 2.2 Mac 系统安装步骤 1：使用 Homebrew 安装步骤 2：验…...

编程日记 2025/5/14 1:56:17

Qml之基本控件

一.Qml常用控件 1.Text(显示普通文本和富文本) 1.1显示普通文本： Window { visible: true width: 320 height: 240 title: qsTr("Hello World") Text { text: "Hello World!" font.family: "Helvetica" font.pointSize: 24 color:…...

编程日记 2025/5/10 16:02:06