React click handlers and bind this

I have a react component where I iterate over a list and create strings. Each line has a delete button. When the delete button is clicked, I want to pass a link to the item on that line.

var TagTable = React.createClass({

        onTagDelete: function(tagName) {

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


So, to store this value in the click handler; I am using bind for both map () and click handler.

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


source to share

2 answers

I'm brand new to react, but I figured I'd drop this here to help.

I think you need to change this line,{}, R.button({onClick: function() {this.onTagDelete(}.bind(this), // BIND
                            className: "delete"}, "\u2716")),


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


I'm sure this name is now being passed to the function. Another way to get data from the clicked object is via links, but with lists of items I don't think this works well because of the duplicate link names. So I'll just do what you are doing now.



You can do less detail:{}, R.button({onClick: this.onTagDelete.bind(this,, // BIND
                                className: "delete"}, "\u2716")),




All Articles