Question

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

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

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

另一种方法可能是通过流行的React库（截至2019年5月），该库名为react-swipeable。但是，将其挂在转盘上后，会出现同样的问题，我们如何激活下一个/上一个？

更新：我认识到“触摸”数据属性已引入in react-bootstrap's Github issue中提到的上游香草Bootstrap 4.2。也许我们可以将最新版本的Bootstrap与react-bootstrap一起使用？

Answer 1

最后，我使用了workaround。

使用react-swipeable，我们可以将Carousel包裹在Swipeable中。使用ref定位儿童轮播并激活儿童的方法。

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}> ...

这个答案可能很快就会过时，因为自从“ touch”数据属性被引入上游Bootstrap 4.2以来，下游React-Bootstrap将来应该会支持它。将来，只需在“轮播”组件中添加“触摸”属性即可。

<Carousel touch={true}>

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

1 个答案: