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

How do I get the id of a button that was clicked? ReactJS

提问by dorkycam

I was wondering how I would go about getting the id (becuase it is unknown) of a button that is clicked. So when the button is clicked, I know what the id of that specific button is. There are lots of buttons on the page and I would like to know which button is pressed (they all have unique id's). Currently the buttons look like this:

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

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

回答by Agney

You can use event.target.idto get the ID of button clicked

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

回答by Saroar Hossain Shahan

You can use either event.target.[selector goes here] or event.currentTarget.[selector goes here] to solve your issue. See example code below.

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

回答by Kevin He

Well if the elements are nested event.targetwon't always work since it refers to the target that triggers the event in the first place. See this linkfor the usage of event.currentTarget, which always refer to the element that the handler is bound to.

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

Another way to grab hold of the element and its attributes is to use React refs. This is more general when trying to get the DOM element in React.

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

回答by Danny Delott

Your onClick handler should receive the click event, which should include the id: event.target.id.

您的 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>

回答by Nishant Dixit

There is several way to do this

有几种方法可以做到这一点

1. With manipulating onClickfunction

1. 带操作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);
}

1. Without manipulating onClickfunction

2. 无操作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);
}