Pass argument to reactjs click handler

Question

I have a question about passing arguments to React click handlers. I have the following code, but for some reason the node argument is not passed to the toggle function. Shouldn't it? It's defined this way because it's a recursive component.

var Element = React.createClass({

    toggle: function(e,node){

    },

    render: function(){

        var nodes = this.props.children.map(function(n){

                return <Element node={n} text={n.text} children={n.children}  />

        });

        return (
               <span onClick={this.toggle.bind(this,this.props.node)}>{this.props.text}</span>

        );
    }

});

I'm don't fully understand why you even bind on this.props.node. You can just access this.props.node in the toggle method. — Daniel Baulig
– Daniel Baulig, Commented Mar 21, 2015 at 21:51
I'm not sure if I can follow. You're assigning your the result of your call to map to a nodes variable which you then never use. I don't understand what this code is supposed to do or achieve. — Daniel Baulig
– Daniel Baulig, Commented Mar 21, 2015 at 22:04

Daniel Baulig · Accepted Answer · 2015-03-21 21:55:35Z

23

Function.prototype.bind bind arguments beginning from left. The correct way to receive the node argument is to look for it at the very left position of the argument list:

toggle: function(node, event) {
  console.log('node', node);
  console.log('event', event);
}

See http://jsfiddle.net/8xxfgce7/ for an example.

edited Mar 21, 2015 at 21:55

answered Mar 21, 2015 at 21:49

Daniel Baulig

11.1k7 gold badges47 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Daniel Baulig Over a year ago

You must be doing something different wrong, this works perfectly fine: jsfiddle.net/8xxfgce7

Daniel Baulig Over a year ago

You can totally set the value of a property to a different node, even in a map. The problem here is that you don't actually render the nodes array. There's a whole bunch of things wrong with your code. The canonical way of assigning to this.props.children, is to pass the nodes as children (<Parent><Child /><Child /></Parent>). Assigning to children property like <Parent children={[<Child />, <Child />]} /> may work, but is not the canonical way. Also, once you actually start rendering nodes your code will end in a stack overflow because the recursion never breaks.

TGH Over a year ago

I found the problem. It was caused by an unrelated error. My bad

TGH Over a year ago

I agree. I accidental removed too much of the code from the actual code to illustrate the real problem. It actually composed as parent - > child components and the model will prevent stackoverflow because the leaf nodes have empty child arrays

Daniel Baulig Over a year ago

@ibiza Yes, just bind multiple arguments, e.g. aFunction.bind(this, argument1, argument2)

|

bir_ham · Accepted Answer · 2017-08-11 08:31:20Z

0

While the above answer is correct. Here is another example how to pass both event and parameter to onClick function.

Your event firing element e.g a button:

<button onClick={this.editTask.bind(this, item._id)}>
  Edit item
</button>

Event handler function:

editItem(id, event) {
  event.preventDefault() // Prevents default form submission
  console.log('id: ', id) // Prints the item id 
  .
  .
  .
}

edited Aug 11, 2017 at 8:31

answered Aug 11, 2017 at 8:25

bir_ham

5135 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pass argument to reactjs click handler

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related