如何获取被点击的按钮的 id？ReactJS

Question

我想知道如何获取被点击的按钮的 id（因为它是未知的）。所以当按钮被点击时，我知道那个特定按钮的 id 是什么。页面上有很多按钮，我想知道按下了哪个按钮（它们都有唯一的 ID）。目前按钮看起来像这样：

  <button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>

Answer 1

您可以使用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>

Answer 2

我知道这个问题已经得到解答，但我正在使用 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>
       );
    }
}

Answer 3

好吧，如果元素是嵌套的，event.target则并不总是有效，因为它首先指的是触发事件的目标。请参阅此链接以了解 的用法event.currentTarget，它始终指的是处理程序绑定到的元素。

另一种获取元素及其属性的方法是使用React refs。当尝试在 React 中获取 DOM 元素时，这更通用。

Answer 4

执行此操作的非常方便的方法（不仅适用于按钮，而且适用于元素列表）是使用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>;

`

Answer 5

您可以使用 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>
    );
  }
}

Answer 6

您的 onClick 处理程序应该接收 click 事件，其中应该包含 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>