reactjs - React click handlers and binding this -

reactjs - React click handlers and binding this -

i have react component iterating on list , creating rows. in each row, there delete button. when delete button clicked, want pass reference element in row.

var tagtable = react.createclass({ ontagdelete: function(tagname) { this.props.ontagdelete(tagname); }, render: function () { homecoming 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) { homecoming 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 preserve this-value in click-handler; utilize bind both map() , click-handler.

is proper way pass arguments handlers in react or there improve way?

i'm new react, figured i'd throw out here help.

i think need alter 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 should pass tag name function. way of getting info clicked subject through refs, lists of items don't think works because of repeated ref names. doing now.

reactjs