Javascript 无法通过onClick事件处理程序访问按钮id

我有一个数据表，每行都有一个具有唯一id的按钮。onClick事件处理程序应该将按钮id记录到控制台。但是，该id有时仅记录到控制台

<Button id={index} onClick={this.handleClick}>
     Click
</Button>

---

每次单击按钮时，“button id”文本都会记录到控制台中，但id（例如target.id）有时只会记录到控制台中。我可以做些什么来修复它？

您不需要使用nativ event.target

试试这个：

<Button id={index} onClick={this.handleClick.bind(this, index)}>
     Click
</Button>

点击

尝试使用以下方法：

<Button id={index} onClick={this.handleClick(this, index)}>
     Click
</Button>

---

单击处理程序事件中

target.id

的可用性将取决于您在此处使用的

按钮组件的实现

在简单的情况下，如果您使用的是“本机”
（请注意小写字母“b”），那么您当前的方法将按预期工作：

{/* Using the "native button" here */}
<button id={index} onClick={this.handleClick}>Log id</button>

handleClick = e => {
    // Native button will pass id value of element to e.target 
    console.log('button id', e.target.id);
}

您使用的是哪个按钮组件
handleClick(e, id) {
    console.log('button id', id);
  }

{/* Using the "native button" here */}
<button id={index} onClick={this.handleClick}>Log id</button>

handleClick = e => {
    // Native button will pass id value of element to e.target 
    console.log('button id', e.target.id);
}

{/* Define local arrow function, pass index in scope as second argument */}
<Button id={index} onClick={ e => this.handleClick(e, index) }>
     Click
</Button>

/* Extend function signature to take explict id argument */
handleClick = (e, id) => {
    console.log('button id', id);
  }