React使用antd的图片预览组件,点击哪个图片就预览哪个的设置

这篇具有很好参考价值的文章主要介绍了React使用antd的图片预览组件,点击哪个图片就预览哪个的设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用了官方推荐的相册模式的预览,但是点击预览之后,每次都是从图片列表的第一张开始预览,而不是点击哪张就从哪张开始预览:React使用antd的图片预览组件,点击哪个图片就预览哪个的设置,HTML前端,react.js,javascript,前端

所以这里我就封装了一下,对初始化预览的列表进行了逻辑处理:

当点击开始预览的时候,要找到当前图片在预览图列表中的索引,然后设置为当前预览图索引,然后等点击左右切换的时候,要改变这个索引,所以要使用onChange函数,等点击关闭按钮的时候,还要重置这个索引为点击时候的图片索引:

import './index.scss'
import { Image } from 'antd'
import { useState } from 'react'

export default function ImageItem(props: any) {
    // console.log('props', props)

    const preList = [
        'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
        'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
        'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
    ]

    const [preIndex, setIndex] = useState(preList.indexOf(props.imgUrl))

    // 当点击前后切换的时候,修改当前预览图
    const handleSwitch = (current: number, prevCurrent: number) => {
        console.log('切换预览图', current, prevCurrent)
        setIndex(current)
    }

    // 关闭预览图是重置预览为当前图索引
    const handleClose = (visible: boolean) => {
        console.log('关闭预览图', visible)
        if (!visible) {
            setIndex(preList.indexOf(props.imgUrl))
        }
    }

    return (
        <div className="file">
            <Image.PreviewGroup
                items={preList}
                preview={{
                    minScale: 0.1,
                    current: preIndex,
                    onChange: handleSwitch,
                    onVisibleChange: handleClose,
                }}
            >
                <Image className="item-img" src={props.imgUrl} />
            </Image.PreviewGroup>
        </div>
    )
}

预览结果: React使用antd的图片预览组件,点击哪个图片就预览哪个的设置,HTML前端,react.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-641433.html

到了这里,关于React使用antd的图片预览组件,点击哪个图片就预览哪个的设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手写一个 React 图片预览组件

    原文链接: 手写一个 React 图片预览组件 前几天打算给博客添加一个图片预览的效果,可在网上找了半天也没找到合适的库,于是自己干脆自己手写了个。 最终实现效果如下: 当鼠标点击图片时生成一个半透明遮罩,并添加一个与点击图片位置大小都相同的图片,之后通过

    2024年02月08日
    浏览(39)
  • react17+antd4 Menu 点击菜单收起其他展开的所有菜单、页面刷新时设置菜单的选中状态和展开状态

    使用path当作Menu的key. 点击菜单,收起其他展开的所有菜单,只留下一个。 Menu的 onOpenChange 方法:SubMenu 展开/ 关闭的回调函数,展开和回收某项菜单时的事件。 Menu的 openKeys 属性:当前展开的SubMenu菜单项的key数组,当前菜单展开项的key数组。 当前要展开哪一项的openKeys将来是

    2024年04月13日
    浏览(83)
  • 前端(十五)——开源一个用react封装的图片预览组件

    👵博主:小猫娃来啦 👵文章核心:开源一个react封装的图片预览组件 Gitee:点此跳转下载 CSDN:点此跳转下载 装依赖 运行 打开 创建一个React函数组件并命名为 ImageGallery 。 在组件内部,使用useState钩子来定义状态变量,并初始化为合适的初始值。 selectedImageUrl 来追踪当前选

    2024年02月10日
    浏览(55)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(58)
  • Antd组件的使用 --- DatePicker(设置默认值)

    它接收的是一个dayjs类型的值,所以我们需要借助一个库 将日期进行转化为dayjs格式 在表单中使用:

    2024年02月07日
    浏览(41)
  • React修改Antd组件的样式

    修改默认的antd组件,需要使用 global 修改后Steps样式 为什么需要这样写呢? 因为我们启动了 CSS Modules ,它是一种技术流的组织css代码的策略,它将为css提供默认的局部作用域。因为构建工具会在编译的时候自动把我们的类名加上一个哈希字符串,例如上面我们写的类名为t

    2024年02月11日
    浏览(53)
  • antd组件的Table,点击某一行,让这行整体变色

    用到了Table的rowClassName属性和onRow属性 首先说rowClassName 它的值是一个函数,参数有两个,第一个是当前行数据,第二个是索引 再说onRow  onRow也有两个参数,第一个参数是当前行数据,第二个参数是这行所对应的索引  核心思想就是,通过onRow里面的事件(我们这里用点击事件

    2024年02月13日
    浏览(34)
  • react+antd,Table表头文字颜色设置

    1、创建一个自定义的TableHeaderCell组件,并设置其样式为红色 2、将CustomTableHeaderCell组件传递到Table组件的columns属性中的title属性中: 3、将数据源(dataSource)、列配置(columns)等相关信息传递给Table组件

    2024年01月18日
    浏览(56)
  • 【react框架】结合antd做表单组件的一些心得记录

    作为一个前端最常遇见的需求场景就是写表单、写表格。写多了会逐渐的积累一些开发心得,此文章根据我使用vue和react的经验记录了一些东西,抛砖引玉的给大家看看。 举例react项目,在做表单的很多时候,我都是从antd上把其中一个form组件例子复制下来,然后再看看提供了

    2024年02月07日
    浏览(97)
  • React + Typescript + Antd:封装通用的字典组件DXSelect

    在开发中,我们经常遇到这样的场景,在表单中,有个下拉框,选择对应的数据。 那么这个下拉框的选项,就是字典。一搬的做法是,通过antd的Select来实现,代码如下:

    2024年02月15日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包