【问题标题】：React onClick not firing on child HTML(JSX) elements反应 onClick 不触发子 HTML（JSX）元素
【发布时间】：2018-06-10 16:31:31
【问题描述】：

背景

我正在尝试将排序功能添加到我创建的表中（使用引导程序 4 进行样式设置）。我使用 React 作为我的框架。我知道这些解决方案存在于 React-Bootstrap-Tables 等很棒的包中，但对于我想要实现的目标来说这些有点过头了，我也喜欢自己学习如何做到这一点。

计划

我知道I will write实现排序的逻辑。

问题

我遇到的问题是我找不到用户点击了哪个标题列，所以我无法通知我的函数要按什么排序。

当我将onClick={} 添加到标题列时，父元素似乎阻塞了侦听器。如果我将onClick={} 添加到标题元素中，我最终会收到一个事件，但不会详细到告诉我点击了什么。

在我观看的视频中，记录器使用了一个按钮 html 元素。当我使用它时，我仍然无法触发onClick={}。

问题：

如何让我的onClick={} 处理子 html(jsx) 元素，以便父级不会阻塞侦听器？

桌子

<table className="table animated fadeIn ">
                <thead>
                  <tr className="d-flex header-row">
                    <th className="col-4" id="lname">
                      <button onClick={sortTableBy}>Last Name </button>
                    </th>
                    <th className="col-4" id="fname" onClick={sortTableBy}>
                      First Name
                    </th>
                    {this.props.selectedHomework ? (
                      <th className="col-4 animated fadeIn text-center">
                        Homework Checker
                      </th>
                    ) : (
                      <th className="col-4" />
                    )}
                  </tr>
                </thead>
                <tbody>{students}</tbody>
              </table>

功能

const sortTableBy = event => {
  console.log("you tried to sort ", event.currentTarget);
};

当我通过控制台记录事件时，什么也没有发生，因为 onClick 不会注册为父元素似乎阻止了监听。

如果我把它放在THEAD 元素上，那么我得到

【问题讨论】：

标签： javascript reactjs onclick bootstrap-table

【解决方案1】：

好吧，这是我的错误。我已经在这段代码上工作了一段时间了。不久前，我想确保标题行不会悬停，所以我添加了一个 pointer-events: none 的类。这就是为什么什么都不会注册 *sigh。

【讨论】：