React click handlers and binding this

Question

I have a react component where I am iterating over a list and creating rows. In each row, there is a delete button. When the delete button is clicked, I want to pass a reference to the element in that row.

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

So in order to preserve the this-value in the click-handler; I use bind both for the map() and the click-handler.

Is this the proper way to pass arguments to handlers in React or is there a better way?

This (pun intended) is fine. Other way would be to use a closure var that = this and use that in the handler that.onTagDelete. Also pass your argument in the binding. — Jared Smith
– Jared Smith, Commented Oct 13, 2014 at 18:18
For what it's worth, people use .bind in nearly all of the components I've seen. It is just a code style difference. — Brigand
– Brigand, Commented Oct 13, 2014 at 19:32
map takes an optional second parameter that is used as the context for the function call, i.e. what "this" means. You can do .map(function() { ... }, this) instead of using bind. — Ross Allen
– Ross Allen, Commented Oct 13, 2014 at 21:00

Blaine Hatab · Accepted Answer · 2014-10-13 18:18:09Z

I'm fairly new to react, but I figured I'd throw this out here to help.

I think you need to change this line,

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

to

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

I'm pretty sure that this should now pass the tag name to the function. Another way of getting data from the clicked subject is through refs, but with lists of items I don't think this works well because of repeated ref names. So I would just do what you are doing now.

savenkov · Accepted Answer · 2015-09-11 21:08:47Z

You can do less verbose:

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

Collectives™ on Stack Overflow

React click handlers and binding this

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related