追加hammerjsが正しく

Question

私は私のreactjsコンポーネントにハンマーJSを追加しようと、それは

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ライフサイクルメソッド内swipeleftとswiperightが機能を期待されてcomponentDidMount

Answer 1

理由でハンマーjsのイベントと、この場合に対処んが、関数名と()を使用して、これらのメソッドを呼び出すことで値を代入しています。 ()を削除してください。

はこのようにそれを書く：

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