reactjs - react 点击处理程序并绑定(bind)它

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-value ；我对 map ()和点击处理程序都使用绑定(bind)。

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

Answer 1

我对 react 还很陌生，但我想我应该把它扔在这里来提供帮助。

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

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")),

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