Как добавить мобильные жесты (например, touch & swipe) в компонент карусели React Bootstrap?

Question

На этот похожий вопрос есть десятки ответов для версии JQuery, но здесь я использую карусельный компонентact-bootstrap и хочу добавить в него возможность мобильных жестов.Как мне это сделать?

В JQuery прямым ответом будет использование Hammer.js для добавления обработчика событий, нацеленного на карусель, и после этого используйте что-нибудь вдоль $(target_your_carousel).carousel('next/prev') для перемещения вперед / назад.

В React, однако, у нас есть ref для нацеливания на карусель, но как нам даже активировать следующий / предыдущий?

Еще один способ может быть через популярную библиотеку реагирования (по состоянию на май 2019 г.) называется react-swipeable.Но после подключения к карусели возникает та же проблема, как мы активируем следующее / пред?

Обновление: Я понимаю, что атрибут данных "touch" введен в апстримvanilla Bootstrap 4.2, как упомянуто в выпуске Github реагирующего бутстрапа .Может быть, мы можем использовать последнюю версию Bootstrap с реакции-бутстрапом?

Answer 1

В конце концов, я использовал этот обходной путь .

Используя реакционную смахивание, мы можем обернуть карусель с помощью 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}> ...

Этот ответ может быть устаревшим в ближайшее время, потому что, поскольку «сенсорный» атрибут данных введен в начальную версию Bootstrap 4.2, последующая реакция-начальной загрузки должна поддерживатьэто в будущем.В будущем просто добавьте атрибут «touch» к компоненту Carousel.

<Carousel touch={true}>