关于react 写 长按弹窗和单点事件一个调用思路

前言

我想做一个长按1s弹出一个拟态框
然后又可以单点 滑动又不想失效的事件

以下是我的一个聊天列表

<div className='Item noSel'
                 onTouchStart={(e) => this.onTouchStart(e,'/ChatInterface')}
                 onTouchMove={(e)=>this.onTouchMove(e)}
                 onTouchEnd={this.onTouchEnd}>
                <div className='waterMask'/>
                <div className='Item-left'>
                    <img className='Item-left-img' src={testimg}/>
                    <div className='flex flex-col hei-inh just-spa-aro ml10'>
                        <p className='flex ali-cen'>吕非<span className='fo-gray fo-12 ml6'>杭州若以文化</span></p>
                        <p className='fo-gray'>[已读]你好你好！！！</p>
                    </div>
                </div>
                <div className='Item-right'>
                    <span className='fo-gray fo-12'>昨天</span>
                </div>
            </div>

交互逻辑

let timers = null;  // 防抖
let touchType = 'shortTouch';   // 触摸类型是长按还是短按
let toUrl = ''; // 要跳转的url
let isTouchmoveing = false // 是否move中（用于判断是否执行单点操作）

class ChatItem extends Component {
    onTouchStart = (e,url) => {
        toUrl = url;
        if (timers) return
        timers = setTimeout(() => {
            clearTimeout(timers)
            timers = null
            touchType = "longTouch"
            console.log('1321')
            Modal.alert('提示!', '是否删除该聊天?', [
                {text: '取消', onPress: () => console.log('cancel')},
                {
                    text: '确定',
                    onPress: () =>
                        new Promise((resolve) => {
                            Toast.info('onPress Promise', 1);
                            setTimeout(resolve, 1000);
                        }),
                },
            ])
        }, 1000)
    }
    onTouchMove(e){
        isTouchmoveing = true
        if(!timers) return   // 节流操作

        //  长按下一移动就取消长按效果
        clearTimeout(timers)
        timers = null
    }
    onTouchEnd = (e) => {
        if (touchType === 'shortTouch' && !isTouchmoveing) {
            console.log('我是单点击')
            // this.props.history.push(toUrl)
        } else if(touchType === 'longTouch') {
            console.log('我是长按')
        }


        e.preventDefault();
        clearTimeout(timers)
        // 复原初始化数据
        timers = null
        touchType = 'shortTouch'
        toUrl= ""
        isTouchmoveing = false
    }

    render() {
        return (
            <div className='Item noSel'
                 onTouchStart={(e) => this.onTouchStart(e,'/ChatInterface')}
                 onTouchMove={(e)=>this.onTouchMove(e)}
                 onTouchEnd={this.onTouchEnd}>
                <div className='waterMask'/>
                <div className='Item-left'>
                    <img className='Item-left-img' src={testimg}/>
                    <div className='flex flex-col hei-inh just-spa-aro ml10'>
                        <p className='flex ali-cen'>吕非<span className='fo-gray fo-12 ml6'>杭州若以文化</span></p>
                        <p className='fo-gray'>[已读]你好你好！！！</p>
                    </div>
                </div>
                <div className='Item-right'>
                    <span className='fo-gray fo-12'>昨天</span>
                </div>
            </div>
        );
    }
}