反应点击处理程序并将其绑定

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
            ])
        }
    }
);

因此，为了在点击处理程序中保留this值；我对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")),

我很确定这现在应该将标签名称传递给函数。从被单击的主题中获取数据的另一种方法是通过引用，但是对于项目列表，由于引用名称重复，我认为这种方法不太有效。所以我就做你现在正在做的。