折腾：
期间，需要去：
用touch的事件
模拟长按
然后去给一个div加上
onTouchStart
constructor(props) { super(props); autoBind(this); this.onItemTouchStart = this.onItemTouchStart.bind(this); this.onItemTouchEnd = this.onItemTouchEnd.bind(this); } onItemTouchStart(){ console.log(“onItemTouchStart”); } onItemTouchEnd(){ console.log(“onItemTouchEnd”); } function EstrusPendingItem({ data, active, show, hide }) { 。。。 return ( <div class={style.item} onTouchStart={this.onItemTouchStart} onTouchEnd={this.onItemTouchEnd}> <div> 。。。 |
但是感觉
用鼠标点击浏览器对应的位置
没有效果，函数没调用啊。
reactjs onTouchStart
javascript – What’s the proper way of binding touchstart on React JS? – Stack Overflow
看到：
React.js学习笔记之事件系统 – 早点儿睡 – SegmentFault
https://segmentfault.com/a/1190000004642694
触摸只会在移动设备上产生
-》回头调试期间，还是先用：
mouse的：
onMouseDown和onMouseUp
现在电脑上调试完毕，再换成touch在移动设备上去试吧。
【已解决】ReactJS中onMouseDown不起效果没有被调用
然后继续去写逻辑了。
此处，虽然代码写了timeout的逻辑，但是遇到个问题：
如何把当前某个行内部对应的特定数据，在onTouchStart和onTouchEnd传递进去
【已解决】ReactJS中onTouchStart和onTouchEnd事件中如何传递特定数据作为参数
然后又遇到问题：
【已解决】ReactJS中如何给setTimeout传递参数
【总结】
然后用下面代码即可实现 长按的事件的检测了：
注意，代码代码中，之所以传递this作为参数，是因为：
最终要显示的内容对应的模块Component（中的div）是属于整个的Class的Component之外，所以需要把this传递进去，才能获得对应的函数。
export default class EstrusManagement extends Component { componentWillUnmount() { clearTimeout(this.longPressItemTimeout); } onItemTouchStart(currentItem, showLongPressOptions){ this.longPressItemTimeout = setTimeout(() => this.onLongPressItem(currentItem, showLongPressOptions), 1000); } onItemTouchEnd(){ clearTimeout(this.longPressItemTimeout); } onLongPressItem(currentItem, showLongPressOptions){ … } renderPending() { const { activeItem, pendingList } = this.state; return ( … <ul class={style.nn_a_list}> { pendingList.map(item => { const setActiveItemFunc = () => this.setActiveItem(item); return ( <EstrusPendingItem currentItem={item} isActive={activeItem === item} showLongPressOptions={setActiveItemFunc} hideLongPressOptions={this.hideActiveItem} thisObj={this} /> ); }) } </ul> </div> ); } } function EstrusPendingItem({ currentItem, isActive, showLongPressOptions, hideLongPressOptions, thisObj }) { const { previous_date, current_date, cow_code, cowshed_name } = currentItem; return ( <div class={style.item} onTouchStart={() => thisObj.onItemTouchStart(currentItem, showLongPressOptions)} onTouchEnd={thisObj.onItemTouchEnd} > … ); } |
转载请注明：在路上 » 【已解决】ReactJS中尝试使用touch事件实现长按效果