循环生成含key/data-id的元素，如何在onClick中传递该参数？

我明白你遇到的困扰了——循环生成多个元素后，想把每个元素的key或者data-id传递给点击事件的函数，但试了好几次都没成功对吧？咱们来一步步解决这个问题。

问题出在哪？ #

看你当前的代码，点击事件里传递的是this.props.id，这是组件本身的props值，不是循环中每个元素独有的$key，所以不管点哪个元素，传过去的都是同一个值，自然拿不到当前元素的key/data-id。

解决方案一：直接传递循环中的$key #

既然你在循环里已经有$key变量了，直接把它作为参数传给buttonPress就行，最简单直接：

buttonPress: function (path, type, period) {
  AppActions.moveToPage(path, { type: type }, period);
},

// 循环渲染的元素部分
<div 
  key={$key} 
  data-id={$key} 
  style={{textAlign: 'center'}} 
  onClick={() => this.buttonPress("Listing", $key, this.state.filters)}
>
  {this.state.Graph ? this.state.diagnosisGraph[$key] : <img src={AppApi.baseUrl + 'img/loading.gif'} />}
</div>

这样每次点击时，buttonPress的第二个参数type就会是当前元素的$key，完全符合你的需求。

解决方案二：通过事件对象获取data-id #

如果你更倾向于用data-id属性来获取值，可以借助点击事件的currentTarget（注意是currentTarget不是target，避免事件冒泡导致的错误）来读取属性值：

buttonPress: function (path, type, period) {
  AppActions.moveToPage(path, { type: type }, period);
},

// 循环渲染的元素部分
<div 
  key={$key} 
  data-id={$key} 
  style={{textAlign: 'center'}} 
  onClick={(e) => {
    // 从绑定事件的元素上获取data-id
    const itemId = e.currentTarget.getAttribute('data-id');
    this.buttonPress("Listing", itemId, this.state.filters);
  }}
>
  {this.state.Graph ? this.state.diagnosisGraph[$key] : <img src={AppApi.baseUrl + 'img/loading.gif'} />}
</div>

小提醒 #

React的key属性主要是给React内部用来优化列表渲染的，虽然可以直接传递，但如果你的$key是业务相关的唯一标识，那完全没问题；如果不是，建议用实际的业务ID来作为data-id和传递的参数，这样更稳妥。

内容的提问来源于stack exchange，提问作者morne