如何创建带左侧图标且仅绑定一个点击事件的链接组件？

你可以通过将图标和文字包裹在同一个可点击容器中，只在容器上绑定一次点击事件来解决这个问题，同时调整CSS适配新的结构，以下是两种可行方案：

方案一：使用语义化<a>标签（适合需要跳转场景） #

将图标和文字都放入同一个<a>标签内，仅在父级<a>上绑定点击事件，同时处理默认跳转逻辑：

修改后的JSX代码 #

import { PlusOutlined } from '@ant-design/icons';

// 封装点击逻辑，按需阻止默认跳转
const handleCreate = (e) => {
  // 如果不需要a标签的默认跳转行为，添加这一行
  e.preventDefault();
  // 调用原有的create逻辑
  create();
};

// 渲染部分
<a href="url" className="linkAdd" onClick={handleCreate}>
  <PlusOutlined style={{ fontSize: '150%' }} />
  <span>Add</span>
</a>

调整后的CSS代码 #

.linkAdd {
  color: #000;
  display: inline-flex;
  align-items: center; /* 让图标与文字垂直居中对齐 */
  text-decoration: none; /* 移除a标签默认下划线 */
}

.linkAdd span {
  padding-left: 8px;
}

.linkAdd:hover {
  color: #322dc3;
}

方案二：使用<div>作为容器（无需跳转场景） #

如果不需要跳转功能，用<div>作为容器更简单，同样只绑定一次点击事件：

修改后的JSX代码 #

import { PlusOutlined } from '@ant-design/icons';

// 渲染部分
<div className="linkAdd" onClick={create}>
  <PlusOutlined style={{ fontSize: '150%' }} />
  <span>Add</span>
</div>

调整后的CSS代码 #

.linkAdd {
  color: #000;
  display: inline-flex;
  align-items: center;
  cursor: pointer; /* 显示手型光标，提示可点击 */
}

.linkAdd span {
  padding-left: 8px;
}

.linkAdd:hover {
  color: #322dc3;
}

核心说明 #

• 两种方案都通过父容器统一绑定点击事件，避免图标和文字各自绑定导致的重复触发问题。
• 用inline-flex替代原有的float布局，更易控制元素对齐，布局稳定性更好。

内容的提问来源于stack exchange，提问作者letters