正确地为React.js组件添加Hammer.js

Question

正确地为React.js组件添加Hammer.js

6

我尝试将Hammer.js添加到我的React组件中，我的组件如下所示。

import React from 'react';
import _ from 'underscore';
import Hammer from 'hammerjs';


class Slider extends React.Component {

    constructor(props) {
        super(props)
        this.updatePosition = this.updatePosition.bind(this);
        this.next = this.next.bind(this);
        this.prev = this.prev.bind(this);

        this.state = {
            images: [],
            slidesLength: null,
            currentPosition: 0,
            slideTransform: 0,
            interval: null
        };
    }


    next() {
        console.log('swipe')
        const currentPosition = this.updatePosition(this.state.currentPosition - 10);
        this.setState({ currentPosition });

    }

    prev() {

        if( this.state.currentPosition !== 0) {
            const currentPosition = this.updatePosition(this.state.currentPosition + 10);
            this.setState({currentPosition});
        }
    }


    componentDidMount() {

        this.hammer = Hammer(this._slider)
        this.hammer.on('swipeleft', this.next());
        this.hammer.on('swiperight', this.prev());


    }

    componentWillUnmount() {
        this.hammer.off('swipeleft', this.next())
        this.hammer.off('swiperight', this.prev())
    }


    handleSwipe(){
        console.log('swipe')
    }

    scrollToSlide() {

    }

    updatePosition(nextPosition) {
        const { visibleItems, currentPosition } = this.state;
        return nextPosition;
    }

    render() {
        let {slides, columns} = this.props
        let {currentPosition} = this.state
        let sliderNavigation = null

        let slider = _.map(slides, function (slide) {
            let Background = slide.featured_image_url.full;
            if(slide.status === 'publish')
                return <div className="slide" id={slide.id}  key={slide.id}><div className="Img" style={{ backgroundImage: `url(${Background})` }} data-src={slide.featured_image_url.full}></div></div>
        });

        if(slides.length > 1 ) {

          sliderNavigation =   <ul className="slider__navigation">
                <li data-slide="prev" className="" onClick={this.prev}>previous</li>
                <li data-slide="next" className="" onClick={this.next}>next</li>
            </ul>
        }

        return <div ref={
            (el) => this._slider = el
        } className="slider-attached"
                    data-navigation="true"
                    data-columns={columns}
                    data-dimensions="auto"
                    data-slides={slides.length}>
                    <div className="slides" style={{ transform: `translate(${currentPosition}%, 0px)`, left : 0 }}> {slider} </div>

                    {sliderNavigation}
            </div>
    }
}

export default Slider;

问题在于在 tap 上，没有任何组件方法被激发。在 componentDidMount 中如何处理 hammer.js 事件。

- fefe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank Shukla · Accepted Answer

原因是，在componentDidMount生命周期方法内，swipeleft和swiperight期望的是函数，但您使用()与函数名称调用这些方法来赋值。移除()即可正常工作。

请像这样编写：

componentDidMount() {
    this.hammer = Hammer(this._slider)
    this.hammer.on('swipeleft', this.next);    // remove ()
    this.hammer.on('swiperight', this.prev);   // remove ()
}