ReactJS中点击map生成的按钮如何获取对应value值

你可以通过以下两种常用方式实现需求：

方式1：利用闭包直接引用遍历值 #

map的每一轮遍历都会生成独立作用域，你可以直接在onClick回调中引用当前轮次的brand变量，无需从事件对象读取，这是最简洁的实现方案：

['NICK', 'NKJR', 'NKTNS'].map(function (brand) {
  return React.createElement('button', {
    onClick: (e) => { 
      console.log(brand) 
    }
  }, brand)
})

方式2：通过自定义DOM属性传递 #

如果你的场景需要从事件对象中统一读取参数，可以给按钮添加标准data-*自定义属性，再从事件对象中读取对应值：

['NICK', 'NKJR', 'NKTNS'].map(function (brand) {
  return React.createElement('button', {
    'data-brand': brand,
    onClick: (e) => { 
      console.log(e.target.dataset.brand) 
    }
  }, brand)
})

自定义属性使用data-前缀是HTML规范写法，对应的值可以通过DOM元素的dataset对象直接读取。

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