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'));

出于测试目的，按钮只是在带有'example'类的div中绘制。

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

Answer 1

查看您编写的以下代码：

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

周围有多余的括号

Answer 2

你可以在生成它们时为每个按钮的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逻辑是没有意义的 - 它应该只负责将事件传递回相关的“订阅者”

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

2 个答案: