我有一个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是"some string"时,它可以正常工作,但当它是input元素时,input元素是event.target属性中引用的元素.

实现这一目标的最佳方式是什么?

推荐答案

因为要将处理程序绑定到th,所以可以使用currentTarget属性.target属性指的是发送事件的元素.

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.currentTarget);
}

Reactjs相关问答推荐

React onKeyUp不一致地使用快速Shift+键按压

cypress 不能点击SPAN

useTranslation不会在languageChanged上重新呈现组件

后端关闭时如何在REACTION AXIOS拦截器中模拟数据?

在React Create App TS项目中安装material UI

useCallback()是否应该用于作为prop传递给子组件的函数,即使该组件包装在memo()中?

react -无法获取函数的最新参数值

蚂蚁 Select .列表弹出窗口不会';有时不会出现

如何删除 bootstrap 手风琴上的边框

Mui Datepicker 设置了错误的日期

在 golang 服务器中刷新或直接 url 路径时响应 404

Zod 验证模式根据另一个数组字段使字段成为必需字段

ReactJS 动态禁用按钮

为什么 setState 在 React 中不是异步的?

如何将值从下拉列表传递到 select 上的输入?响应式JS

ReactJs 行和列

当状态改变时如何执行一些动作,但只针对第一次更新?

从输入中获取数字时,react 计数器不会增加

如果两个组件在 React 中导入相同的 CSS 文件会发生什么?

Axios 删除在带有授权令牌的react js 中不起作用