Created
October 5, 2018 07:19
-
-
Save sbpipb/8bb4b0b9247b7b02263731acb49c7aab to your computer and use it in GitHub Desktop.
Jekku does Js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// I'll explain it again | |
```class MyComponent extends React.Component { | |
myEvent = () => { | |
console.log('do something') | |
} | |
render () { | |
<button onClick={this.myEvent}> WOW </button> | |
} | |
}``` | |
// This works | |
// Why? Because you are passing a function as a value. It has not executed yet | |
```class MyComponent extends React.Component { | |
myEvent = () => { | |
console.log('do something') | |
} | |
render () { | |
<button onClick={this.myEvent()}> WOW </button> | |
} | |
}``` | |
// THIS does not work preoprly | |
// Why? Because you invoked the function and passed its return to onClick | |
// onClick is now `undefined` because there is nothing returned from this.myEvent's invocation | |
```class MyComponent extends React.Component { | |
myEvent = () => { | |
return () => console.log('do something') | |
} | |
render () { | |
<button onClick={this.myEvent()}> WOW </button> | |
} | |
}``` | |
// THIS is weird but it will work | |
// Why? Because myEvent returns a function that has not executed yet. (A thunk) | |
```class MyComponent extends React.Component { | |
myEvent = (params) => { | |
return () => console.log(params) | |
} | |
render () { | |
<button onClick={(e) => this.myEvent(e)}> WOW </button> | |
} | |
}``` | |
//This will work. It's a common pattern |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment