我想知道如何获取被点击按钮的 id（因为它是未知的）。因此，当单击按钮时，我知道该特定按钮的 id 是什么。页面上有很多按钮，我想知道按下了哪个按钮（它们都有唯一的 id）。目前按钮如下所示：
<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>
【问题讨论】：
element.id
标签： javascript reactjs
如果元素是嵌套的，event.target 并不总是有效，因为它首先指的是触发事件的目标。有关event.currentTarget 的用法，请参见this link，它始终引用处理程序绑定到的元素。
获取元素及其属性的另一种方法是使用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>【讨论】：
TypeError: Cannot read property 'target' of undefined 错误
event 参数
event.target.innerText 会让你明白的
我知道这已经得到解答，但我正在使用 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>
);
}
}
【讨论】：
执行此操作的非常方便的方法（不仅适用于按钮，还适用于元素列表）是使用 DOM 元素的自定义属性 data-someName，然后通过 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 goes here] 或 event.currentTarget.[selector going 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>
);
}
}
【讨论】：
有几种方法可以做到这一点
onClick函数操作 <button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={(e)=>this.props.onClick(e,this.props.keyword)} className="removeButton">Remove</button>
onClick = (e,id) =>{
console.log(id);
}onClick函数<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>
onClick = (e) =>{
const id = e.target.getAttribute("id");
console.log(id);
}【讨论】：
TypeError: Cannot read property 'target' of undefined 错误
e，您能用这个onClick={(e)=>this.props.onClick(e)} 替换它并告诉我吗？
e 在这种情况下function 应该得到e，你能描述更多幕后发生的事情吗？
App 组件，它是 WordTable 组件的父组件，它是 Row 组件的父组件，该组件呈现每个按钮（以及行中的其他内容）WordTable从 JSON 文件中获取信息并为该文件中的每个对象生成一行（以及此按钮）。此按钮应该能够从表中删除行并从 JSON 文件中删除项目
你可以这样做：
function getId(id) {
console.log(id);
}<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick="getId(this.id)" className="removeButton">Remove</button>【讨论】：
如果处理事件的函数在同一个组件中，最好使用event.target.id，当您尝试访问嵌套为event.target.id 的子组件的DOM 元素时，这将有其局限性。使用event.currentTarget.id是嵌套的，
这是因为event.currentTarget
可以从子元素深处识别出导致事件的元素，而event.target.id 会将目标设置为子组件，并且由于目标不变，因此无法识别具有该元素的子组件因此有缺陷。
您可以观看此 youtube video 以更好地了解。 也阅读他们的differences
【讨论】：
event.target.getAttribute('attribute_name')将涵盖更广泛的场景
您的 onClick 处理程序应接收单击事件，其中应包括 id：event.target.id。
<button
key={uuidv4()}
id={this.props.keyword}
value={this.props.keyword}
onClick={(event) => /* you want to use event.target.id */}
className="removeButton">Remove</button>
【讨论】：
这对我有用：
functionName = (event) => {
const id = event.target.id;
const value = event.target.value;
console.log("Value of the button: ", value)
console.log("Id of the button: ", id)}
【讨论】：