我有一个 React 组件的一部分，如下所示：
var headerElement = someBoolean ? <input/> : 'some string';
return <th onClick={this._onHeaderClick}>{headerElement}</th>;
以及th元素的点击处理程序：
_onHeaderClick(event) {
event.preventDefault();
console.log(event.target);
},
我想捕获th元素。当headerElement是“某个字符串”时它工作正常，但是当它是一个input元素时，该input元素是event.target属性中引用的元素。
实现这一目标的最佳方法是什么？
由于您将处理程序绑定到th您可以使用currentTarget属性。将目标物业是指调度事件的元素。
_onHeaderClick(event) {
event.preventDefault();
console.log(event.currentTarget);
}
检查它们
_onHeaderClick(event) {
event.preventDefault();
if(event.target === event.currentTarget) {
// handle
}
}
像这样？
event.target.parentNode
出于某种原因，接受的解决方案对我不起作用。
一种可能的解决方法是向data-value您希望从onClick事件中排除的子元素添加一个标签：
const eg = () => {
const clickParent = (event: React.MouseEvent) => {
event.preventDefault();
let dataValue = (event.target as HTMLElement).getAttribute('data-value');
if (dataValue !== 'child') {
console.log('parent clicked');
};
};
const clickChild = (event: React.MouseEvent) => console.log('child clicked');
return (
<div data-value='parent' onClick={clickParent}>
<div data-value='child' onClick={clickChild}>
</div>
</div>
);
};