[英]React onClick not firing on child HTML(JSX) elements
I am trying to add sorting capabilities to a table I created (Styled with bootstrap 4). 我试图将排序功能添加到我创建的表中(用bootstrap 4设置样式)。 I am using React as my framework. 我正在使用React作为我的框架。 I know these solutions exists in awesome packages like React-Bootstrap-Tables but these are a bit overkill for what I want to achieve and I also like learning how to do this myself. 我知道这些解决方案都存在于React-Bootstrap-Tables之类的出色软件包中,但是对于我想要实现的目标来说,这些解决方案有些过头了,我也喜欢自己学习如何做到这一点。
I know the logic I will write to achieve the sorting. 我知道我将编写实现排序的逻辑。
The problem I am having is that I can't find out which header column the user has clicked on, so I am unable to inform my functions what to sort by. 我遇到的问题是我无法找到用户单击了哪个标题列,因此无法告知我的功能排序依据。
When I add onClick={}
to a header column, the parent element seems to be blocking the listener. 当我将onClick={}
添加到标题列时,父元素似乎阻止了侦听器。 If I add the onClick={}
to the header element, I end up getting an event but doesn't go granular enough to tell me what I clicked on. 如果将onClick={}
添加到header元素,则最终会得到一个事件,但不够详尽,无法告诉我单击了什么。
In the video I watched, the recorder used a button html element. 在我观看的视频中,记录器使用了html按钮元素。 When I used this I still couldn't get the onClick={}
to fire. 使用此功能时,我仍然无法启动onClick={}
。
How do I get my onClick={}
to work on a child html(jsx) element so that the parent is not blocking the listener? 如何使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);
};
When I to console log the event, nothing happens as the onClick to will not get registered as the parent element seems to block the listen. 当我控制台记录事件时,什么都没有发生,因为onClick不会被注册,因为父元素似乎阻止了侦听。
If I put this on the THEAD
element, then I get 如果我把它放在THEAD
元素上,那么我得到
Ok, this was my mistake. 好的,这是我的错误。 I been working on this code for some time now. 我已经在这段代码上工作了一段时间了。 A while back I wanted to ensure the Header Row would not be hoverable so I added a class that pointer-events: none
. 前一段时间,我想确保Header Row不可悬停,因此我添加了一个pointer-events: none
类pointer-events: none
。 This is why nothing would register *sigh. 这就是为什么没有东西会*叹气的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.