javascript - 无法在映射元素中执行 onClick 函数

Question

我正在尝试将点击功能添加到从数组映射的列表标签中，即:

{this.props.addresses.map((address, index) =>
   <li key={`address-${index}`} onClick={this.addressClick}>{address.prediction}</li>
)}

addressClick 在构造函数中定义如下:

  constructor (props) {
    super(props)
    this.addressClick = this.addressClick.bind(this)
  }

像这样作为类中的一个函数

  addressClick () {
    console.log('Clicked')
  }

当我点击我的列表标签时没有任何反应，我没有看到任何控制台语句。

Answer 1

将其绑定(bind)到 map 方法:

{this.props.addresses.map((address, index) =>
   <li key={`address-${index}`} onClick={this.addressClick}>{address.prediction}</li>
).bind(this)}