使用react框架,ant design中双击事件触发单击事件解决办法

场景:

      在进行tag标签的编辑时,需求单击tag表示选中,双击tag进入编辑模式,进行修改。这样如果不做处理,双击会同时触发单击事件,解决思路:设置一个变量,在单击事件中进行延时设置,在双击事件中,直接将单击事件的延时取消,那么就不会触发单击事件。

详细实现思路:

1.  设置var clickTimeChange;  用于单击事件的延时变量。

2. 单击事件的代码如下:

 handleCheckChange = (tag, index) => {
    clearTimeout(clickTimeChange);
    clickTimeChange = setTimeout(
      () => getSelectReport(),
      1000
    );
  };

3. 双击事件的代码如下:

双击事件有两种实现方式:
方式一:
<span
      onDoubleClick={e => {
              this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                  clearTimeout(clickTimeChange); // 清除延时
                  this.editInput.focus();
                    });
                    e.preventDefault();
                  }}
 >aaa</span>


方式二:
handleClose = (e, removedTag, index) => {
    this.setState(() => {
      clearTimeout(clickTimeChange);  // 清除延时
     this.props.getSelect(); // 调用父组件的方法,业务逻辑
    e.preventDefault();
  };

如上便解决了双击事件触发单击事件的问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值