动态按钮输出 React.js

Question

我正准备构建一个带有 React 的小型 WebApp 供个人使用和一些经验:)

我想与用户输入一起工作 -> 根据他将填写的职位数量，可能的 "tabs" 或 "buttons" 数量会有所不同

对于这个例子，我创建了一个名为 "data" 的数组状态。

我想问你是否有更好的方法来处理这种情况，如果这些按钮之一将被单击，你将如何处理操作？

简单的香草事件侦听器，然后继续在该函数内做出反应或完全不同？

我应该为创建的每个按钮同时创建一个 onClick={this.someFunc} 吗？

这是我的小反应代码： http://pastebin.com/eseYdr3G

Answer 1

我认为你的想法是正确的。创建按钮时，可以将其id设置为正确的名称，并设置其点击回调，如下所示：

return <button id={i[0]} onClick={this.handleClick}>{i[0]}</button>

（本例中ID与名称相同，但您可以随意使用。）

那么你的处理程序就会在 class:

handleClick: function(e) {
  e.preventDefault();
  var buttonName = e.target.id;
  // buttonName is the name of the button clicked
}

Dynamic button output React.js