CODEWITHSUNDEEP
javascriptreactjs
Ilja
Ilja

Reputation: 46527

Stop onClick functions executing on mount without using () => function(someVal)

I'm getting really annoyed by this behaviour that occurs onClick:

If I have:

<button onClick={ this.myFunc(myVal) }></button>

This fires as soon as component mounts not when button is clicked, hence I need to do the following in order to fix it:

<button onClick={ () => this.myFunc(myVal) }></button>

But I believe this is not the correct way to achieve this? Also what if I want to actually pass this.myFunc(myVal) down to another component? It would not work.

Upvotes: 1

Views: 100

Answers (3)

wintvelt
wintvelt

Reputation: 14101

The onClick attribute expects a function as a parameter. That is why the second setup IS correct, and 1st one is not (unless myFunc returns a function)..

The following are functions:

(event) => myFunc(myVal, event)        // anonymous function, which calls myFunc IF executed
myFunc.bind(this, myVal)   // myFunc without parentheses, with parameters - including event - bound

The following is not a function

myFunc(myVal)              // == THE RESULT of the function, so == whatever myFunc returns

In an example:

// myFunc is a function that calls another function
// returns length of whatever is passed in
myFunc(val) {
  otherFunc()
  return (val.length)
}
// here: myFunc is defined, but it has never executed: otherFunc was not called

let myVal = [1,2]

let callback = () => myFunc(myVal)
// here myFunc is still NOT called, neither is otherFunc
// callback is now defined as a (anonymous) function, which, whenever called
// will execute the function myFunc, by passing in the value of myVal

let a = myFunc(myVal)
// here: myFunc WILL be called, so also otherFunc
// at this point a == 2 (the length of the array myVal)

let b = callback()
// here, callback function is executed, and so also myFunc
// at this point b == 2

Upvotes: -1

sundar
sundar

Reputation: 408

you are calling the function while doing like below, thats why your method gets called immediately after mounting

<button onClick={ this.myFunc(myVal) }></button>

you have to just assign the function like below

<button onClick={ this.myFunc }></button>

if you want to pass variables to that method, add that variable to state and access that from ther.

Upvotes: 0

Patrick Roberts
Patrick Roberts

Reputation: 51946

When you say

<button onClick={ this.myFunc(myVal) }></button>

You are telling React that you want the returned value from executing this.myFunc(myVal) to be assigned to the onClick handler. Instead you, probably want to give it the function with the parameter set as default:

<button onClick={ this.myFunc.bind(this, myVal) }></button>

This binds myVal as the first argument to this.myFunc and ensures that the context is also bound properly as well. Keep in mind that this causes the event parameter to be passed in as the second parameter to the function.

Upvotes: 3

Related Questions