추가 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() 
}