reactjs - 将hammerjs正确添加到react js组件中

Question

我尝试将hammer js添加到我的reactjs组件中，我的组件如下所示

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;

问题就像点击时没有任何组件方法被触发。 在这种情况下，我该如何处理 componentDidMount

中的 Hammer JS 事件

Answer 1

原因是，在 componentDidMount 生命周期方法 swipeleft 和 swiperight 中需要这些函数，但您通过使用 调用这些方法来分配值>() 带有函数名称。删除 () 它应该可以工作。

这样写:

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