Skip to content

Instantly share code, notes, and snippets.

@sbpipb

sbpipb/events.js

Created October 5, 2018 07:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sbpipb/8bb4b0b9247b7b02263731acb49c7aab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sbpipb/8bb4b0b9247b7b02263731acb49c7aab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sbpipb revised this gist Oct 5, 2018. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions events.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    I'll explain it again
    // I'll explain it again


    ```class MyComponent extends React.Component {
    @@ -11,8 +11,8 @@ I'll explain it again
    }
    }```

    This works
    Why? Because you are passing a function as a value. It has not executed yet
    // 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')
    @@ -22,9 +22,9 @@ Why? Because you are passing a function as a value. It has not executed yet
    <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
    // 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')
    @@ -35,8 +35,8 @@ onClick is now `undefined` because there is nothing returned from this.myEvent's
    }
    }```

    THIS is weird but it will work
    Why? Because myEvent returns a function that has not executed yet. (A thunk)
    // 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)
    @@ -47,4 +47,4 @@ Why? Because myEvent returns a function that has not executed yet. (A thunk)
    }
    }```

    This will work. It's a common pattern
    //This will work. It's a common pattern
  2. sbpipb created this gist Oct 5, 2018.
    50 changes: 50 additions & 0 deletions events.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    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