Javascript 无法在映射的元素中执行onClick函数

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

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

作为类中的一个函数

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

当我点击列表标签时，什么也没发生，我看不到任何控制台语句。

您可以通过将索引传递给另一个函数，然后调用

addressClick（）

来实现这一点

结果:

{this.props.addresses.map（（地址，索引）=>
将其绑定到映射方法：

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

{this.props.addresses.map（（地址，索引）=>
{address.prediction}
).bind（这个）}
除非我遗漏了什么，否则您的代码应该可以工作。例如：

const arr = [1,2,3,4]

class App extends Component {
  constructor(props) {
    super(props)
    this.addressClick = this.addressClick.bind(this)
  }

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

  render() {
    return (
      <ul>
        {arr.map((address, index) =>
          <li key={`address-${index}`} onClick={this.addressClick}>{address}</li>
        ) }
      </ul>
    )
  }
}

const arr=[1,2,3,4]
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.addressClick=this.addressClick.bind（this）
}
地址点击（）{
console.log（'Clicked'）
}
render（）{
返回(

{arr.map（（地址，索引）=>
{address}
) }

)
}
}
mapping code-render方法在哪里？可能，这里没有定义this.addressClick？您还可以将
this
作为第二个参数传递到
map（）
并避免绑定。顺便说一句，它应该是
this.props.addresses.map.bind（this）（（）=>{…}）
，不是吗？忘了我评论的第二部分吧。它叫this.map是错误的，因为它不是我们想要的。我认为外部绑定的唯一方法是通过
map（）
的第二个参数。
{this.props.addresses.map((address, index) =>
    <li key={`address-${index}`} onClick={`clickListener(${index})`}</li>
)}

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

const arr = [1,2,3,4]

class App extends Component {
  constructor(props) {
    super(props)
    this.addressClick = this.addressClick.bind(this)
  }

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

  render() {
    return (
      <ul>
        {arr.map((address, index) =>
          <li key={`address-${index}`} onClick={this.addressClick}>{address}</li>
        ) }
      </ul>
    )
  }
}