React中h2内未单独包裹的图标能否绑定onClick点击事件？

实现方案说明 #

• 首先你要求的「不包裹任何额外标签、直接给单个文本字符绑定点击事件」没有可行实现方案：React的事件处理器只能绑定到DOM元素节点，你页面上渲染的☶属于纯文本节点，本身不支持绑定事件，你之前尝试的<onClick={somfunc}>写法不符合React语法规范，自然无法生效。
• 你担心加标签破坏现有样式的顾虑完全可以打消，用默认无样式的行内<span>包裹图标即可，不需要额外写CSS做对齐，渲染效果和直接写文本完全一致，不会影响现有布局，是最简便的实现方式：

<h2>
  <span onClick={somfunc}>&#9782;</span> Today's Bills
</h2>

• 如果你确实极端抗拒添加任何额外标签，也可以给整个<h2>绑定点击事件，通过判断点击位置是否落在图标区域触发逻辑，但该方案需要额外计算宽度，适配性差，远不如加<span>的方案简便，仅供参考：

const handleH2Click = (e) => {
  // 计算点击位置距离h2左边界的距离
  const h2Left = e.currentTarget.getBoundingClientRect().left;
  const clickOffsetX = e.clientX - h2Left;
  // 单个图标宽度大概等于当前h2的fontSize大小
  const iconWidth = parseFloat(getComputedStyle(e.currentTarget).fontSize);
  if (clickOffsetX < iconWidth) {
    somfunc();
  }
}

// 绑定到h2标签
<h2 onClick={handleH2Click}>&#9782; Today's Bills</h2>

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