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

效果:

代码:

定义的初始值和方法

    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>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

单节锂离子/锂聚合物电池保护IC SDG3JX

SDG3JX内置高精度电压检测电路和延迟电路&#xff0c;适用于锂离子/锂聚合物可充电电池的保护IC。SDG3JX 最适合于对单节锂离子/锂聚合物可充电电池组的过充电、过放电和过电流的保护。 特点  内置高精度电压检测电路 * 过充电检测电压:4.28V0.025V&#xff1b; * 过充电解除…

小例子Flask网站开发—Cookies(四)

Cookies是服务器保存在用户浏览器端的数据片段&#xff0c;用于跟踪和识别用户。Cookies是当您浏览网站时&#xff0c;网站可以在您的计算机或移动设备上存储的小型文本文件。它们通常以键值对&#xff08;key/value&#xff09;的形式存储信息&#xff0c;并且每次您访问特定网…

.Net RabbitMQ(消息队列)

文章目录 一.RabbitMQ 介绍以及工作模式1.RabbitMQ的介绍&#xff1a;2.RabbitMQ的工作模式&#xff1a; 二.RabbitMQ安装1.安装Erlang语言环境2.安装RabbitMQ 三.在.Net中使用RabbitMQ1.HelloWorld模式2.工作队列模式3.发布订阅模式4.Routing路由模式和Topics通配符模式 一.Ra…

安全开发实战(4)--whois与子域名爆破

目录 安全开发专栏 前言 whois查询 子域名 子域名爆破 1.4 whois查询 方式1: 方式2: 1.5 子域名查询 方式1:子域名爆破 1.5.1 One 1.5.2 Two 方式2:其他方式 总结 安全开发专栏 安全开发实战​​http://t.csdnimg.cn/25N7H 前言 whois查询 Whois 查询是一种用…

java.lang.OutOfMemoryError: WrappedJavaFileObject --idea启动项目内存溢出解决

java.lang.OutOfMemoryError 解决方案 现象 项目开发时&#xff0c;启动idea&#xff0c;报内存溢出错误&#xff0c;如下&#xff1a; java: java.lang.OutOfMemoryError: WrappedJavaFileObject.....解决 通过 调整idea 的 配置参数 来调整 jvm 大小解决。 -Xmx8192m-Xm…

C++进修——C++基础入门

初识C 书写HelloWorld #include <iostream> using namespace std;int main() {cout << "HelloWorldd" << endl;system("pause");return 0; }注释 作用&#xff1a;在代码中加一些说明和解释&#xff0c;方便自己或其他程序员阅读代码…

二分法问题

日升时奋斗&#xff0c;日落时自省 目录 1、二分法 2、二分法问题 2.1 、在排序数组中查找元素的第一个和最后一个位置 2.2、搜索插入位置 2.3、山脉数组的峰顶索引 2.4、0-n-1中缺失的数字 1、二分法 二分法是比较简单的一种查找算法&#xff0c;但是效率很高&#xff0…

【创建型模式】原型模式

一、原型模式概述 原型&#xff08;Prototype&#xff09;模式的定义&#xff1a;用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里&#xff0c;原型实例指定了要创建的对象的种类。用这种方式创建对象非常高效&#xf…

【Qt】Qt安装包、源码、子模块(submodules)下载

1、Qt 4.0 ~ Qt5.14 Qt 4.0 ~ Qt5.14 离线安装包、源码和子模块(submodules)源码下载路径: https://download.qt.io/new_archive/qt/以Qt5.7.1为例,注意子模块都是源码,需要独立编译 2、Qt5.15 ~ Qt6.7 Qt5.15 ~ Qt6.7源码和子模块(submodules)源码下载路径: htt…

分类算法——决策树(五)

认识决策树 决策树思想的来源非常朴素&#xff0c;程序设计中的条件分支结构就是if-else结构&#xff0c;最早的决策树就是利用这类结构分割数据的一种分类学习方法。 决策树分类原理详解 为了更好理解决策树具体怎么分类的&#xff0c;通过一个问题例子&#xff1a; 问题…

【MIT6.824】lab3 Fault-tolerant Key/Value Service 实现笔记

引言 lab3A的实验要求如下&#xff1a; Your first task is to implement a solution that works when there are no dropped messages, and no failed servers. You’ll need to add RPC-sending code to the Clerk Put/Append/Get methods in client.go, and implement Pu…

HiveSql中的函数家族(二)

一、窗口函数 1、什么是窗口函数 在 SQL 中&#xff0c;窗口函数&#xff08;Window Functions&#xff09;是一种特殊的函数&#xff0c;它允许在查询结果集的特定窗口&#xff08;通常是一组行&#xff09;上执行聚合、分析和计算操作&#xff0c;而无需聚合整个结果集。窗口…

使用Python工具库SnowNLP对评论数据标注(二)

这一次用pandas处理csv文件 comments.csv import pandas as pd from snownlp import SnowNLPdf pd.read_csv("C:\\Users\\zhour\\Documents\\comments.csv")#{a: [1, 2, 3], b: [4, 5, 6], c: [7, 8, 9]}是个字典 emotions[] for txt in df[sentence]:s SnowNLP(…

接收区块链的CCF会议--ICSOC 2024 截止7.24

ICSOC是CCF B类会议&#xff08;软件工程/系统软件/程序设计语言&#xff09; 2023年长文短文录用率22% Focus Area 4: Emerging Technologies Quantum Service Computing Digital Twins 3D Printing/additive Manufacturing Techniques Blockchain Robotic Process Autom…

【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【QTOpenCV】车牌号检测 学习记录 首先在QT里面配置好OpenCV .pro文件中加入&#xff1a; INCLUDEPATH G:/opencv/build/include LIBS -L"G:/opencv/build/x64/vc14/lib"\-lopencv_core \-lopencv_imgproc \-lopencv_highgui \-lopencv_ml \-lopencv_video \-lo.c…

Meta Llama 3强势来袭:迄今最强开源大模型,性能媲美GPT-4

前言 Meta的最新语言模型Llama 3已经发布&#xff0c;标志着在大型语言模型&#xff08;LLM&#xff09;领域的一次重大突破&#xff0c;其性能在行业内与GPT-4相媲美。此次更新不仅提升了模型的处理能力和精确性&#xff0c;还将开源模型的性能推向了一个新的高度。 Huggingf…

Docker八股总结

1. 容器和虚拟机的区别 传统虚拟机技术是虚拟出一套硬件后&#xff0c;在其上运行一个完整操作系统&#xff0c;在该系统上再运行所需应用进程&#xff1b;而容器内的应用进程直接运行于宿主的内核&#xff0c;容器内没有自己的内核&#xff0c;而且也没有进行硬件虚拟。因此容…

2021年全国大学生电子设计竞赛D题——基于互联网的摄像测量系统(二)

09 电路设计 前面介绍了系统的硬件框图如下&#xff1a; 硬件基本分为三块&#xff0c;两个摄像节点&#xff0c;一个终端节点。 1. 摄像节点硬件 摄像节点由一个DE10-Nano开发板和一个D8M摄像头实现&#xff0c;DE10-Nano开发板的HDMI接口外接HDMI显示器来显示拍摄到的视频。…

Flask + Bootstrap vs Flask + React/Vue:初学者指南

在这篇博客文章中&#xff0c;我们将比较 Flask Bootstrap 和 Flask React/Vue 这两种技术栈&#xff0c;以帮助初学者了解哪种组合更适合他们的项目需求。我们将从学习曲线、易用性、依赖管理、构建部署和路由定义等方面进行比较。 学习曲线 Flask 是一个基于 Python 的轻…

信息系统项目管理师0055:优化和持续改进(4信息系统管理—4.1管理方法—4.1.5优化和持续改进)

点击查看专栏目录 文章目录 4.1.5优化和持续改进1.定义阶段2.度量阶段3.分析阶段4.改进/设计阶段5.控制/验证阶段4.1.5优化和持续改进 优化和持续改进是信息系统管理活动中的一个环节,良好的优化和持续改进管理活动能够有效保障信息系统的性能和可用性等,延长整体系统的有效使…