Javascript 如何创建一个按钮组件，该组件在React中的onClick方法上使用参数？

好的，我已经做了两天了，我需要一些帮助。我以前为我玩的游戏制作了一个战利品记录程序，现在我想把它制作成一个网络应用程序。我正在使用React JS构建应用程序

我需要制作一个包含onClick函数的按钮组件，并可以获取参数。我的应用程序使用for循环渲染与所选怪物的战利品表长度相等的按钮（因此只生成所需的按钮数量）。这些按钮需要有一个onClick方法，该方法接受一个value参数（如果重要的话，该值是数组的索引。数组存储loot表）

我想我可以通过引用{this.props.name}来生成按钮名，并通过使用{this.props.value}来传递它需要传递的值

var Button = React.createClass({
    render: function() {
        return <button type="button" onClick={this.onClick.bind(this, 
        {this.props.id})}>{this.props.name}</button>
    },

    onClick: function(value) {
        alert(value);
    }
});

React.render((<Button name="test" id={1} />), 
document.getElementById('example'));

var按钮=React.createClass({
render:function（）{
返回{this.props.name}
},
onClick：函数（值）{
警报（值）；
}
});
React.render（（），
document.getElementById（'example'）；

出于测试目的，该按钮仅在一个div中绘制，并带有类“example”

---

我试图找到这样的例子，但我找不到任何人想要动态创建按钮，同时传递参数，就像我需要为我的webapp做的那样。谢谢你的帮助

您可以在生成每个按钮的

onClick

时为其创建一个闭包：

const Button = ({ name, onClick }) => {
    return (
        <button onClick={onClick}>{ name }</button>
    )
}

const List = () => {
    return (
        <div>
            { [0,1,2,3,4,5,6,7,8,9].map((value, index) => {
                const onClick = () => { /* use index here */ }
                return <Button onClick={onClick} name={value}/>
            }) }
        </div>
    )
}

const按钮=（{name，onClick}）=>{
返回(
{name}
)
}
常量列表=（）=>{
返回(
{[0,1,2,3,4,5,6,7,8,9].map（（值，索引）=>{
const onClick=（）=>{/*在此处使用索引*/}
返回
}) }
)
}

举个例子。请记住，我使用的是ES6/JSX，而不是

React.createClass

（为了我的理智，因为这是我熟悉的）

---

此外，按钮负责处理

onClick

逻辑是没有意义的-它应该只负责将事件传递回相关的“订阅者”

查看您编写的以下代码：

return <button type="button" onClick={this.onClick.bind(this, 
        {this.props.id})}>{this.props.name}</button>

返回{this.props.name}

onClick绑定中存在错误。应该是这样的：

return <button type="button" onClick={this.onClick.bind(this, 
        this.props.id)}>{this.props.name}</button>

返回{this.props.name}

---

这个.props.id周围有多余的括号

谢谢！这就是问题所在！我不知道onClick方法周围的括号足够大，在插入属性时不必再次这样做。