如何在地图功能中的每个列表项上设置调用答案

【问题标题】：How do I set up a call on each list item within map function如何在地图功能中的每个列表项上设置调用
【发布时间】：2016-08-25 14:17:01
【问题描述】：

在我尝试基于 material-ui List 组件渲染列表的 react 组件中，我遇到了以下问题。

我循环遍历一组联系人对象以呈现 ListItem 列表，但我希望能够处理每个 List 项上的点击事件。

我使用 onTouchTap 属性并尝试调用我的 onSelectedContact 方法，但是如何从地图函数中传入当前联系人对象？

{this.props.contacts.map(( contact, i ) => <span key={i}>
  <ListItem
    key={i}
    primaryText={contact.name}
    onTouchTap={this.onSelectContact?????}
  />
}

【问题讨论】：

this.onSelectContact.bind(this, contact)
@Maxx 这不是评论，这是答案。
bind 使用给定的上下文和参数创建新函数。第一个参数是上下文，其他是参数
@anoop 你需要在这里绑定 2 种情况。 1 只是将一些参数绑定到功能（如问题），2 绑定上下文。您的示例中有一个错误（onTouchTap={onSelectContact()}）。你执行函数并传递它的结果。正确的是 onTouchTap={onSelectContact} 你只传递了处理程序。当ListItem this.props.onTouchTap() 改变它的上下文时，这意味着你不能（例如）在父组件处理程序中做this.setState()，因为处理程序中的上下文是 ListItem 的道具对象。对不起我的英语）
@anoop 1.您不应该在渲染函数中声明函数（它在每次渲染时声明），2.您的示例中有一个无状态组件，这意味着您不能使用组件的状态。你的处理程序会在现实世界的代码中做什么？

标签： javascript reactjs ecmascript-6

【解决方案1】：

this.onSelectContact.bind(this, contact)

【讨论】：