如何将移动手势（例如触摸和滑动）添加到 React Bootstrap 轮播组件？

Posted 2023-03-31

【中文标题】如何将移动手势（例如触摸和滑动）添加到 React Bootstrap 轮播组件？

【英文标题】：How to add mobile gestures (eg. touch & swipe) to a React Bootstrap carousel component?

【发布时间】：2019-05-05 10:54:33

【问题描述】：

这个类似的问题有几十个 JQuery 版本的答案，但这里我使用的是 react-bootstrap 轮播组件，我想为其添加移动手势功能。我该怎么做？

在 JQuery 中，直接的答案是使用 Hammer.js 添加针对轮播的事件处理程序，然后使用 $(target_your_carousel).carousel('next/prev') 旁边的东西滑动下一个/上一个。

然而，在 React 中，我们有 ref 来定位轮播，但我们如何激活下一个/上一个？

另一种方法可能是通过一个名为 react-swipeable 的流行反应库（截至 2019 年 5 月）。但是钩到轮播之后，同样的问题出现了，我们如何激活next/prev呢？

更新：我意识到“触摸”数据属性被引入上游 vanilla Bootstrap 4.2，如 in react-bootstrap's Github issue 所述。也许我们可以使用最新版本的 Bootstrap 和 react-bootstrap？

【参考方案1】：

最后我用了这个workaround。

使用 react-swipeable，我们可以用 Swipeable 包裹 Carousel。使用 ref 定位子 Carousel 并激活子方法。

import React,  Component  from 'react'; 
import  Swipeable  from 'react-swipeable';

class FooClass extends Components 
    constructor()  ...
        this.carouselRef = React.createRef(); 

    render() 
    onSwipedLeft: () =>  this.carouselRef.current.next(); 

    return 
        <Carousel ref=this.carouselRef> ...

这个答案可能很快就会过时，因为由于上游 Bootstrap 4.2 中引入了“触摸”数据属性，下游的 react-bootstrap 将来应该会支持它。以后只需在 Carousel 组件中添加“touch”属性即可。

<Carousel touch=true>