React binding events within a function

Question

I want to pass in arguments into an onClick function, but it keeps firing on return. I believe I need to bind the click handler, but I am not exactly sure how to do that.

function (phone_calls, right_side, before_children) {

   
   function test (blah){
		console.log(blah)
    }




  return boxy(
    "Phone Calls",

    _.map(phone_calls, function(a) {



 	 return d("div.splitter-wrap", {onClick: test("testarg")}, [
 	   d("table.splitter", { className: name}, d("tr", 
 			[d('td',a.date),d('td',a.number)]
 	   	))
 	 ]);
}),

Yeah... Trying to bind the onclick to the test function so ti wont fire on return — Whymess
– Whymess, Commented Mar 21, 2017 at 18:40
Try to call the callback function this way this.test.bind(this, 'testarg'). — Rafael Berro
– Rafael Berro, Commented Mar 21, 2017 at 18:42

corse32 · Accepted Answer · 2017-03-21 18:42:34Z

1

you can use an arrow function, like:

{ onClick: ()=> { test("testarg") } }

otherwise you can use bind such as:

{ onClick: test.bind(this, "testarg") }

but that is more verbose and has the (potentially) unwanted side-effect of setting this.

answered Mar 21, 2017 at 18:42

corse32

1665 bronze badges

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

Collectives™ on Stack Overflow

React binding events within a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related