React Ant Design 简单实现如何选中图片

news2024/11/23 19:19:44

效果:

代码:

定义的初始值和方法

    const [selected, setSelected] = useState(0); // 表示当前选中的图片索引

    const handleClick = (index) => {
        if (selected === index) {
            setSelected(null); // 如果点击的是已选中的图片,则取消选中状态
        } else {
            setSelected(index); // 否则设置当前选中的图片索引为点击的图片索引
        }
    };

样式组件

   <Form.Item
                                label="模板名称"
                                colon={false}
                                name="template"
                                rules={[
                                    {
                                        required: true,
                                        message: '此项为必填项,请填写后提交',
                                    },
                                ]}
                                labelAlign="top"
                                labelCol={{ span: 24 }}
                            >
                                <div style={{ display: 'flex' }}>
                                    {[0, 1].map((index) => (
                                        <div key={index} style={{ marginRight: '15px', position: 'relative' }}>
                                            <img
                                                src={template}
                                                alt="--"
                                                style={{ maxWidth: '100px', maxHeight: '100px', cursor: 'pointer' }}
                                                onClick={() => handleClick(index)}
                                            />
                                            {selected === index && ( // 如果当前图片被选中,则显示小对勾图标
                                                <CheckCircleFilled
                                                    style={{
                                                        position: 'absolute',
                                                        right: '5px',
                                                        bottom: '5px',
                                                        fontSize: '20px',
                                                        color: 'green',
                                                    }}
                                                />
                                            )}
                                        </div>
                                    ))}
                                </div>
                            </Form.Item>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1605301.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI大模型日报#0418:Stable Diffusion 3开放API、Meta新研究让AI Agent理解物理世界

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 微软刚发布了VASA-1 这个人工智能可以让单张图像具有生动的说话和歌唱能力 摘要: 微软发布了VASA-1人工智能&#xff0c;它能使单…

java算法day56 | 动态规划part15 ● 392.判断子序列 ● 115.不同的子序列

392.判断子序列 动规五部曲&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] 表示以下标i-1为结尾的字符串s&#xff0c;和以下标j-1为结尾的字符串t&#xff0c;相同子序列的长度为dp[i][j]。确定递推公式 在确定递推公式的时候&#xff0c;…

显示msvcp140.dll丢失要如何解决?这5种方法高效修复msvcp140.dll

msvcp140.dll是Microsoft Visual C Redistributable软件包中的一个文件&#xff0c;主要用于支持使用C编程语言编写的软件的正常运行。如果你的电脑出现缺少msvcp140.dll的错误消息&#xff0c;可能会影响到某些程序的启动和运行。然而&#xff0c;不必过度担心&#xff0c;因为…

iText 5

依赖 implementation com.itextpdf:itextpdf:5.5.13.3implementation com.itextpdf:itext-asian:5.2.0implementation com.alibaba:fastjson:1.2.83compileOnly org.projectlombok:lombok:1.18.22annotationProcessor "org.projectlombok:lombok:1.18.22"测试 impor…

找不到api-ms-win-crt-runtime-l1-1-0.dll文件5种解决方法

在日常使用计算机的过程中&#xff0c;我们时常会遭遇各类意想不到的问题&#xff0c;其中之一就是“api-ms-win-crt-runtime-l1-1-0.dll丢失”。这个错误通常发生在Windows操作系统中&#xff0c;它表示一个动态链接库文件丢失或损坏。这个问题可能会导致某些应用程序无法正常…

【Vue脚手架】

初始化脚手架 如果下载缓慢请配置npm淘宝镜像&#xff1a; npm config set registry http://registry.npm.taobao.org 全局安装vue脚手架&#xff1a; vue/clinpm install -g vue/cli 1. 创建项目使用命令 vue create xxx 注&#xff1a;后面有选择安装版本&#xff0c;请注意选…

授权协议OAuth 2.0之除了授权码许可还有什么授权流程?

写在前面 源码 。 本文看下OAuth2.0的另外3中授权流程&#xff0c;资源拥有者凭据许可&#xff0c;客户端许可&#xff0c;隐式许可。分别看下具体的使用流程以及该使用场景。 1&#xff1a;资源拥有者凭据许可 资源拥有者凭据许可&#xff0c;这里资源拥有者的凭据是什么呢&…

Vue源码解读学习

Vue源码 观察者模式 & 发布订阅 观察者模式&#xff1a;中心一对多 系统单点间的灵活和拓展&#xff08;广播的方式&#xff09; 发布订阅&#xff1a;将注册列表遍历发布给订阅者 initInject initState initProvide他们挂载顺序为什么这样设计&#xff1f; initstate…

MySQL行格式(row format)

MySQL行格式&#xff08;row format&#xff09; 表的行格式决定了其行的物理存储方式&#xff0c;这反过来又会影响查询和 DML 操作的性能。随着单个磁盘页面容纳更多行&#xff0c;查询和索引查找可以更快地工作&#xff0c;缓冲池中需要的高速缓存内存更少&#xff0c;写出…

京西商城——前端项目的创建以及前后端联调

创建VUE项目 在jingxi_shop_project文件夹中再创建一个 frontend 文件夹用来存放前端项目 /jingxi_shop_project/backend/jingxi_shop_project....../frontend/jingxi_shop_web......首先要安装 node.js 和 VUE cli&#xff0c;进入到项目目录内创建项目 vue create jingxi_…

[Vision Board创客营]学习片上Flash移植FAL

文章目录 [Vision Board创客营]学习片上Flash移植FAL介绍环境搭建使用组件测试porbeerasewriteread 结语 [Vision Board创客营]学习片上Flash移植FAL 水平较菜&#xff0c;大佬轻喷。&#x1f630;&#x1f630;&#x1f630; 介绍 &#x1f680;&#x1f680;Vision-Board 开…

解锁流量密码:如何利用HubSpot打造高效的获客策略?(下)

在当今数字化时代&#xff0c;流量是企业成功的关键。HubSpot作为一款全面的营销自动化工具&#xff0c;为我们提供了强大的支持&#xff0c;帮助企业打造高效的流量获取策略。接下来&#xff0c;我们将从社交媒体与SEO优化、自动化营销流程、数据分析与效果评估以及流量获取策…

【R语言】组合图:散点图+箱线图+平滑曲线图+柱状图

用算数运算符轻松组合不同的ggplot图&#xff0c;如图&#xff1a; 具体代码如下&#xff1a; install.packages("devtools")#安装devtools包 devtools::install_github("thomasp85/patchwork")#安装patchwork包 library(ggplot2) library(patchwork) #p1是…

Linux进程和任务管理

目录 一.程序和进程的关系 程序 进程 线程 线程与进程的区别 二.查看进程信息ps 方法一 常用选项 方法二 三.TOP动态查看进程信息 进程信息区各列解释 top常用命令 系统查看命令总结 查看进程信息pgrep 查看进程树pstree 四.控制进程 进程的启动方式 进程的前…

electron的webview和内嵌网页如何通信

在 Electron 的世界里&#xff0c;webview 标签相当于一个小盒子&#xff0c;里面可以装一个完整的网页&#xff0c;就像一个迷你浏览器。当你想和这个小盒子里的内容说话时&#xff08;也就是进行通信&#xff09;&#xff0c;这里有几个方法可以帮你做到&#xff1a; 这里只写…

LIUNX文件系统

目录 1.磁盘的物理结构 2.CHS定位法 3.磁盘的逻辑存储 4.系统层面 inode.block[15] 创建文件的流程 查找文件的流程 了解文件系统&#xff0c;首先要了解磁盘是如何存储和读取数据的。 1.磁盘的物理结构 可以理解这个盘上有很多的小磁铁&#xff0c;通过旋转盘面和摆动…

LeetCode-热题100:114. 二叉树展开为链表

题目描述 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例…

内业减少80%人工操作,林地地形轻松测!

林业作为维护生态平衡和保护环境的关键领域&#xff0c;其科学管理和合理利用是当前林业工作的重中之重。林业调查旨在全面了解当前林业资源的状况&#xff0c;其中林地地形测量是林业调查的基础工作。通过对林地地形的准确测量&#xff0c;可获取森林的地理位置、面积、地貌、…

探索VR数字展厅,对企业未来展示新模式

在数字化浪潮的推动下&#xff0c;企业展示也在经历着一场革命&#xff0c;VR数字展厅正在以一种全新的方式重塑我们的生活和工作空间&#xff0c;不仅重塑了客户的观展体验&#xff0c;也为企业营销打开了新的渠道。 VR数字展厅作为实体展厅的数字化延伸&#xff0c;正以其沉浸…

C++笔记:引用

目录 概念&#xff1a; ​编辑 引用的特性&#xff1a; 引用中的权限问题&#xff1a; 引用与指针的区别&#xff1a; 引用的使用&#xff1a; 概念&#xff1a; 引用是给已存在变量取一个别名&#xff0c;编译器不会为引用变量开辟内存空间。 引用的符号&#xff1a;&…