我想知道如何获取被点击的按钮的 id（因为它是未知的）。所以当按钮被点击时，我知道那个特定按钮的 id 是什么。页面上有很多按钮，我想知道按下了哪个按钮（它们都有唯一的 ID）。目前按钮看起来像这样：
<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>
如何获取被点击的按钮的 id？ReactJS
IT技术
javascript
reactjs
2021-04-03 02:43:23
6个回答
好吧，如果元素是嵌套的，event.target则并不总是有效，因为它首先指的是触发事件的目标。请参阅此链接以了解 的用法event.currentTarget，它始终指的是处理程序绑定到的元素。
另一种获取元素及其属性的方法是使用React refs。当尝试在 React 中获取 DOM 元素时，这更通用。
您可以使用event.target.id来获取单击的按钮的 ID
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
const id = event.target.id;
console.log(id);
}
render() {
return (
<button id="unique-id" onClick={this.handleClick}>Button</button>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>我知道这已经得到了回答，但我正在使用 react 并面临类似的问题，花了 2 个小时试图弄清楚为什么 event.target.id 有时为 null 或空字符串
这为我解决了：
class Button extends React.Component {
getButtonId = (e) => {
console.log(e.currentTarget.id);
}
render() {
return (
<button id="yourID" onClick={this.getButtonId}>Button</button>
);
}
}
执行此操作的非常方便的方法（不仅适用于按钮，还适用于元素列表）是使用data-someNameDOM 元素的自定义属性，然后通过event.currentTarget.dataset.someName
const openCard = (event) => {
console.log('event.currentTarget.dataset.id', event.currentTarget.dataset.id); // >> id
//do more actions with id
};
<Card onClick={openCard} data-id={item.id}>
<CardContent />
</Card>;`
您可以使用 event.target.[selector go here] 或 event.currentTarget.[selector go here] 来解决您的问题。请参阅下面的示例代码。
class Button extends React.Component {
handleId = (e) => {
console.log(e.target.id);
console.log(e.currentTarget.id);
}
render() {
return (
<button id="yourID" onClick={this.handleId}>Button</button>
);
}
}