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

Question

背景

我试图将排序功能添加到我创建的表中（用bootstrap 4设置样式）。 我正在使用React作为我的框架。 我知道这些解决方案都存在于React-Bootstrap-Tables之类的出色软件包中，但是对于我想要实现的目标来说，这些解决方案有些过头了，我也喜欢自己学习如何做到这一点。

计划

我知道我将编写实现排序的逻辑。

问题

我遇到的问题是我无法找到用户单击了哪个标题列，因此无法告知我的功能排序依据。

当我将onClick={}添加到标题列时，父元素似乎阻止了侦听器。 如果将onClick={}添加到header元素，则最终会得到一个事件，但不够详尽，无法告诉我单击了什么。

在我观看的视频中，记录器使用了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类pointer-events: none 。 这就是为什么没有东西会*叹气的原因。