如何在 React 中创建一个在其 onClick 方法上接受参数的按钮组件？

Question

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

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

我想我可以通过引用 {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'));

出于测试目的，按钮仅绘制在具有“示例”类的 div 中。

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

Answer 1

您可以在生成它们时为每个按钮的 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>
    )
}

例如。请记住，我使用的是 ES6/JSX 而不是 React.createClass（为了我的理智，因为这是我所熟悉的）。

此外，按钮负责处理onClick 逻辑是没有意义的 - 它应该只负责将事件传递回相关的“订阅者”

Answer 2

看看你写的以下代码：

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

onClick 绑定有错误。它应该是这样的：

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

this.props.id 周围有多余的括号