这 2 天上班遇到的问题: react 使用 swiper3 插件实现 banner 轮播, 其中有个 banner 图有个 click 点击事件, 而其他的是页面跳转. 出现了一个问题:
就是向右滑动到该帧时的 swiper, 点击时未触发 react 的 onClick 方法.
因为昨天玩滑板时, 手上受了点伤, 所以今天没出去玩了, 休息一天. 于是正好拿来整理下一个技术点.
这里我们使用简单案例来说明:
错误示范
我们先来看看错误代码(其实理论是正确的):
组件初始化一个 banner 数组
render 中渲染出轮询 banner, 并给每个 banner 绑定一个 onClick 事件, 传入参数 i
绑定的方法: 点击后执行弹出当前为第几个 banner
使用 Swiper 对象, 初始化为轮播图.
照理来讲, 我们分别点击这个 swiper 的每个 banner 应该会弹出 1,2,1,2...... 的
但是实际上:
(点击 1,2 两图时触发了, 但是点击第 3 图, click 方法就没生效了)
动态图如下:
我们来分析一下原因吧:
原因
首先, banner 只有 2 个, 照理应该是 2 个 swiper-slide,
但是在初始化时使用了 loop:true
便由 swiper 插件再复制生成了 2 个. 因此有了 4 个:
而新的 2 个 slide 是 swiper 插件生成的, 并没有绑定 react 的事件, 所以点击之后没有触发到事件.
怎么办呢? 其实这样的效果已经无法完全使用 react 处理了. 因为插件生成的 swiper 并不是虚拟 dom 了.
所以这里需要使用到部分的 dom 操作. 然后和 react 连接起来.
正确示范
来看看解决方案吧
数据一样, 第 2 图中, 我们在 slide 中加入一个属性 data-i, 这个 i 就是我们之后要用到方法中参数
我们在初始化之后, 给每个 slide 绑定一个 click 事件:
点击后拿到之前绑定的 i, 表示当前点击的是第几个 banner, 然后再调用组件对象的 click 方法.
(这里的_this 代表当前 react 组件对象, 因为前面声明了, 这样就又可以从 dom 操作回到 react 操作了)
运行实例
来源: https://www.cnblogs.com/wuhairui/p/9343846.html