react-swipes icon indicating copy to clipboard operation
react-swipes copied to clipboard

when I use it in my react project it goes wrong

Open summerangel opened this issue 8 years ago • 6 comments

@younth image get the wrong message in console "Cannot read property 'transitionProperty' of undefined"

summerangel avatar May 10 '17 06:05 summerangel

@summerangel hi , 请问你是在什么环境下使用的,是如何引入的呢?方便的话贴下使用的代码哈~

younth avatar May 10 '17 09:05 younth

@younth 就是直接把你的demo放到我项目中来运行,然后就报那个错误了,项目用的是react,通过npm install 来安装的你的插件,react中用的是render: function() {}这种格式,跟你demo中的这个不同。代码被我撤回了,贴不了代码

summerangel avatar May 10 '17 10:05 summerangel

render: function() {}这个没问题的。你在react工程里面,建议通过import的方式引入库使用。

import ReactSwipe from 'react-swipes'
    
    // swipes 的配置
    let opt = {
    distance: 620, // 每次移动的距离,卡片的真实宽度
    swTouchend: (ev) => {
        let data = {
            moved: ev.moved,
            originalPoint: ev.originalPoint,
            newPoint: ev.newPoint,
            cancelled: ev.cancelled
        }
        console.log(data);
    }
    }

render: function(){
    return(
    <div className="card-swipe" >
        // 第二层div  react-swipes生成一个className为 card-slide的div
        <ReactSwipe className="card-slide" options={opt}>
            // 第三层,即本身的item
            this.state.card.length && this.state.card.map((item, index) => <div className="item"> </div>
        </ReactSwipe>
    </div>
)
}

younth avatar May 11 '17 02:05 younth

@younth 找到 原因了,可能是react版本不同,我这个版本的需要.getDomNode()来获取。 image 现在就是在浏览器中如果使用手机模式就滑动不了,我看了下你的demo,也是一样,这个是要在发布上去了才能滑动吗?

summerangel avatar May 11 '17 05:05 summerangel

@summerangel 还真是这样,我把demo通过本地server打开就可以在手机模式滑动了,直接文件打开不行,原因需要看看。你没有起本地server吗?

younth avatar May 11 '17 08:05 younth

我放项目中,浏览器中手机模式又能滑动了,后面没有出现不滑动的现象

summerangel avatar May 11 '17 08:05 summerangel