React onClick不会触发子HTML（JSX）元素

Question

背景

我正在尝试为我创建的表添加排序功能（使用bootstrap 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元素上，那么我得到

Answer 1

好的，这是我的错误。我一直在研究这段代码。前段时间我想确保Header Row不会被挖掘，所以我添加了一个pointer-events: none的类。这就是为什么没有人会记录*叹气。