React 元素多个事件同时触发

发表于 分类于 Valine：

react 的 Tag 标签同时存在 onClick 和 onClose 事件时，触发 onClose 的同时也会触发 onClick，如何避免

解决方案

这是一个常见的问题。在 React 中，当一个元素同时具有 onClick 和 onClose 事件时，点击关闭按钮会同时触发这两个事件。为了避免这种情况，我们可以使用事件冒泡的阻止机制。以下是解决这个问题的步骤：

在 onClose 处理函数中阻止事件冒泡
确保 onClick 事件不会在关闭按钮被点击时触发
以下是优化后的代码：

import React from 'react';
import { Tag } from 'antd'; // 假设使用的是 Ant Design 的 Tag 组件

interface TagProps {
  // ... 其他属性
  onClose: () => void;
  onClick: () => void;
}

const CustomTag: React.FC<TagProps> = ({ onClose, onClick, ...props }) => {
  const handleClose = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation(); // 阻止事件冒泡
    onClose();
  };

  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
    // 确保点击的不是关闭按钮
    if (!(e.target as HTMLElement).closest('.ant-tag-close-icon')) {
      onClick();
    }
  };

  return (
    <Tag
      {...props}
      onClose={handleClose}
      onClick={handleClick}
    />
  );
};

// 使用示例
const YourComponent: React.FC = () => {
  return (
    <CustomTag
      closable
      onClose={() => console.log('Tag closed')}
      onClick={() => console.log('Tag clicked')}
    >
      Tag Content
    </CustomTag>
  );
};

export default YourComponent;

这个解决方案的关键点：

  1. 在 onClose 处理函数中使用 e.stopPropagation () 阻止事件冒泡。
  2. 在 onClick 处理函数中，我们检查点击的目标是否是关闭图标。如果不是，才触发 onClick 事件。

使用这种方法，当你点击标签的关闭图标时，只会触发 onClose 事件，而不会触发 onClick 事件。点击标签的其他部分时，只会触发 onClick 事件。

注意事项：

  1. 这个例子假设使用的是 Ant Design 的 Tag 组件。如果使用其他组件库，可能需要调整 CSS 选择器（例如 .ant-tag-close-icon）。
  2. 确保将原来的 Tag 组件替换为这个新的 CustomTag 组件。
  3. 这个解决方案适用于大多数情况，但在某些特殊情况下可能需要进一步调整。

如果你的具体实现有所不同，或者使用了不同的组件库，可能需要稍微调整代码。

相关文章