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

效果:

代码:

定义的初始值和方法

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

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

样式组件

javascript 复制代码
   <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>
相关推荐
一枚前端小能手6 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123423 分钟前
异步请求的性能提升
前端
我是天龙_绍24 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo1 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever1 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033131 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端