使用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();
  };

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

最后

以上就是爱笑鱼为你收集整理的使用react框架，ant design中双击事件触发单击事件解决办法的全部内容，希望文章能够帮你解决使用react框架，ant design中双击事件触发单击事件解决办法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。