Question

我有一个react组件，我在列表上迭代并创建行。在每一行中都有一个删除按钮。单击删除按钮时，我想传递对该行中元素的引用。

var TagTable = React.createClass({

        onTagDelete: function(tagName) {
            this.props.onTagDelete(tagName);
        },

        render: function () {
            return R.table({className: "bg-box padded"}, [
                R.thead({},
                    R.tr({}, [
                        R.th({}, ""),
                        R.th({}, "Tag"),
                        R.th({}, "Regexes")
                    ])),
                R.tbody({},
                    this.props.tags.map(function (tag) {
                        return R.tr({}, [
                            R.td({}, R.button({onClick: function() {this.onTagDelete(tag.name)}.bind(this), // BIND
                                className: "delete"}, "\u2716")),
                            R.td({key: "name"}, tag.name),
                            R.td({key: "regexes"}, tag.regexes.join(", "))]);
                    }.bind(this))) // BIND
            ])
        }
    }
);

所以为了在click-handler中保留this-value;我对map（）和click-handler都使用bind。

这是在React中将参数传递给处理程序的正确方法还是有更好的方法？

Answer 1

我反应很新，但我想我会把它扔出去帮忙。

我认为你需要改变这一行，

R.td({}, R.button({onClick: function() {this.onTagDelete(tag.name)}.bind(this), // BIND
                            className: "delete"}, "\u2716")),

到

R.td({}, R.button({onClick: function() {this.onTagDelete.bind(this, tag.name)}, // BIND
                            className: "delete"}, "\u2716")),

我很确定现在应该将标记名称传递给函数。从点击的主题获取数据的另一种方法是通过引用，但是由于重复的引用名称，我不认为这很有效。所以我会做你现在正在做的事情。

Answer 2

你可以做的更简洁：

 R.td({}, R.button({onClick: this.onTagDelete.bind(this, tag.name), // BIND
                                className: "delete"}, "\u2716")),

反应点击处理程序并绑定它

2 个答案: