将Hammerjs正确添加到React js组件 [英] adding hammerjs to a react js component properly

问题描述

我尝试将Hammer js添加到我的reactjs组件中，并且该组件如下所示

I try to add hammer js to my reactjs component and my component looks as it follows

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

the problem is like on tap none of the components method are fired. How do I deal in this case with the hammer js events in componentDidMount

推荐答案

原因位于 componentDidMount 生命周期方法内 swipeleft 和 swiperight 需要这些函数，但是您可以通过使用带有函数名称的（）来调用这些方法来分配值。删除（）应该可以。

Reason is, inside componentDidMount lifecycle method swipeleft and swiperight expect the functions but you are assigning value by calling those methods by using () with function name. Remove () it should work.

这样写：

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

这篇关于将Hammerjs正确添加到React js组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！