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

问题描述

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

从'react'导入反应；从'下划线'导入_；从'hammerjs'导入锤子；类滑块扩展 React.Component {构造函数(道具){超级(道具)this.updatePosition = this.updatePosition.bind(this);this.next = this.next.bind(this);this.prev = this.prev.bind(this);这个.state = {图片: []，幻灯片长度:空，当前位置:0，幻灯片变换:0，间隔:空};}下一个() {console.log('刷卡')常量 currentPosition = this.updatePosition(this.state.currentPosition - 10);this.setState({ currentPosition });}上一页(){如果(this.state.currentPosition！== 0){常量 currentPosition = this.updatePosition(this.state.currentPosition + 10);this.setState({currentPosition});}}组件DidMount() {this.hammer = 锤子(this._slider)this.hammer.on('swipeleft', this.next());this.hammer.on('swiperight', this.prev());}组件WillUnmount() {this.hammer.off('swipeleft', this.next())this.hammer.off('swiperight', this.prev())}手柄滑动(){console.log('刷卡')}滚动滑动(){}更新位置(下一个位置){const { visibleItems, currentPosition } = this.state;返回下一个位置；}使成为() {让{幻灯片，列} = this.props让 {currentPosition} = this.state让滑块导航 = null让滑块 = _.map(幻灯片，函数(幻灯片){让背景 = slide.featured_image_url.full;如果(slide.status === '发布')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>}返回 

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

中的锤子 js 事件

解决方案

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

这样写:

componentDidMount() {this.hammer = 锤子(this._slider)this.hammer.on('swipeleft', this.next);//消除 ()this.hammer.on('swiperight', this.prev);//消除 ()}

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;

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

解决方案

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.

Write it like this:

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

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