没有标签的元素可以有 onClick 功能吗？（反应）

Question

我有一个 header 元素：

<h2>&#9782; Today's Bills</h2>

我希望 ☶ (☶) 图标有一个 onClick 功能，但不给它一个标签，所以它保持在 <h2> 标签上。

我的方法是这样的

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

那么有办法吗？如果没有，有没有办法给 <h2> 标签的这一部分 onClick？

我不想将其设为 2 tag-elements 并写入 css 以使它们对齐，因为这可能会破坏其他内容。我比较新，所以不必这样做会更好。

Answer 1

那行不通，请使用一个元素（例如 span）

编辑：此 JSX 需要转换为 HTML 并且需要将事件绑定到实际元素。

Answer 2

这可以通过 CSS 完成，而无需插入另一个元素。

如果您绝对不想在 HTML 中插入额外的元素，那么您可以在元素之前使用伪元素。

这可以保存特殊字符并将指针事件设置为自动，而实际的 h 元素设置了指针事件 none。

h2 {
  pointer-events: none;
}

h2::before {
  content: "36";
  pointer-events: auto;
}

<h2 onclick="alert('I have seen a click');">Today's Bills</h2>

[目前仅在 Edge/Chrome 上测试过]

但是，可能存在可访问性问题，因为我不确定每个屏幕 reader 都会宣布该特殊字符，因此使用特殊软件的人可能会错过点击它的可能性。

Can an element with no tag have an onClick function? (Reactjs)