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

您可以使用secret access key来获取单击按钮的ID

event.target.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"));

Answer 2

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

`

Answer 3

我知道这个问题已经得到解决，但我正在与之合作，并面临类似的问题，浪费了2个小时试图弄清为什么event.target.id有时为空或空字符串

这为我解决了这个问题：

class Button extends React.Component {

    getButtonId = (e) => {
      console.log(e.currentTarget.id);
    }

    render() {
       return (
          <button id="yourID" onClick={this.getButtonId}>Button</button>
       );
    }
}

Answer 4

您可以使用event.target。[选择器进入此处]或event.currentTarget。[选择器进入此处]解决您的问题。请参见下面的示例代码。

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 5

您可以这样做：

<!DOCTYPE html>
<head>
</head>

<body>

<script type="text/javascript">

function SomeFunction(event){

if(event.isTrusted){
   
  alert('This came from a human');


 } else {alert('This came from a bot');}
}

</script>

<button id="logon" onclick="SomeFunction(event);">Logon</button>

<button onclick="logon.click();">BOT clicking button</button>

<button onclick="SomeFunction(true);">BOT running function directly</button>

</body>
</html>

function getId(id) {
  console.log(id);
}

Answer 6

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

Answer 7

有几种方法可以做到

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

Answer 8

如果元素嵌套event.target并不总是可行的，因为它首先指向触发事件的目标。有关event.currentTarget的用法，请参见this link，该用法始终引用处理程序绑定到的元素。

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

Answer 9

这对我有用：

<?php

namespace Drupal\my_module;

use Drupal\contact\ContactFormListBuilder;

/**
 * Class CustomContactFormListBuilder.
 *
 * @package Drupal\my_module
 */
class CustomContactFormListBuilder extends ContactFormListBuilder {

  /**
   * {@inheritdoc}
   */
  public function render() {
    return parent::render(); // TODO: Change the autogenerated stub
  }

}

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

9 个答案: