如何在react中将标记id传递给onClick函数？

Question

我想传递th标签的id

<thead>
 <tr>
    <th id='name' onClick={this.click.bind(this)}>Name</th>
    <th id='phone' onClick={this.click.bind(this)}>Phone number</th>
    <th id='email' onClick={this.click.bind(this)}>Email</th>
 </tr>
</thead>

单击（）函数-

click(){
console.log('the clicked id is:') //here i want the id
}




Answer 1

这应该行得通：

<tr>
  <th id='name' onClick={this.foo}>Name</th>
  <th id='phone' onClick={this.foo}>Phone number</th>
  <th id='email' onClick={this.foo}>Email</th>
</tr>

onclick函数

   foo=(e)=> {
     console.log(e.target.id);
   }

Answer 2

您可以这样做：

const headers = [
  { id: 'name', label: 'Name' },
  { id: 'phone', label: 'Phone' },
  { id: 'Email', label: 'Name' },
]

const ab = (
  <thead>
    <tr>
      {headers.map(doc => (
        <th onClick={() => { this.click(doc.id) }}>{doc.label}</th>
      ))}
    </tr>
  </thead>
)

Answer 3

绑定需要争论

this.click.bind(this, 'phone')

click(phone) {
  // ...
}

或者使用es6箭头函数

onClick={() => this.click('phone')}