reactjs 中运用swiper 插件时点击事件失效问题_swiper react navigation无法点击-优快云博客

本文链接：https://blog.youkuaiyun.com/czq0312/article/details/75216350

在ReactJS项目中使用swiper插件（如swiper.js、react-swiper、react-id-swiper）时，遇到点击事件失效的问题。原因是swiper的实现原理导致当前轮播项上未绑定onclick事件。解决策略是调整事件绑定方式，确保事件能在轮播项上正常触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在reactjs 中运用swiper 相关的插件（包括swiper.js,react-swiper,以及react-id-swiper）会出现点击事件失效的问题，那么问题出现在哪里呢？

先上正常的逻辑代码

return (
      <Swiper
        {...params}
      >
        {that.props.bannerData.map((item,index) => {
              return (
                    <img  src={item.imgurl} onClick={e=>this.clickFunc(e} key={index}/>
                )
        })}
      </Swiper>
    )

正常情况下会这样写，而且页面的渲染，以及点击貌似没有问题，但是当我们在第一屏反向滑动时候点击发现页面跳转的逻辑没有执行？这是为什么呢？

经过仔细查看发现原来swiper的原理是 n+1 或者是n+2 .............

那么也就是在某一轮播的item上是没有onclick 事件的，因此解决方案也就出现了，看下面的代码

componentDidUpdate(newProps, newState) {
    var bannerItems = document.getElementsByClassName('swiper-slide'),
        _this = this;
      for (var i = 0, length = bannerItems.length; i < length; i++) {
        bannerItems[i].onclick = function(e) {
          e.stopPropagation();
          e.preventDefault();
          var bannerObj = JSON.parse(e.target.dataset.item) || {};
          _this.linkTo(bannerObj);
        }
      }
  }

return (
      <Swiper
        {...params}
      >
        {that.props.bannerData.map((item,index) => {
              return (
                    <img  src={item.imgurl} data-item={JSON.stringify(item)}  key={index}/>
                )
        })}
      </Swiper>
    )

当我们在组建更新的生命周期里做这样的处理时候问题就可以解决了，现在无论你怎样滑动都没有问题了