React events

From wikinotes
Revision as of 02:02, 11 December 2022 by Will (talk | contribs) (Will moved page React DOM events to React events without leaving a redirect)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

You can subscribe to a subset of HTML DOM events with callbacks in a similar fashion to javascript.
However, within react:

  • events are camelcased
  • callbacks are methods (inside {}s) instead of strings

React DOM events are abstracted, so they behave the same on all browsers.

Documentation

SyntheticEvent Docs https://reactjs.org/docs/events.html
Event Handling Tutorial https://reactjs.org/docs/handling-events.html

Example

A component, whose element subscribes to the DOM event through onClick.

class HelloWorld extends React.Component {
  sayHello() {
    console.log('hello')
  }

  render() {
    return (
      <button onClick={() => this.sayHello()}> // anonymous callback variation
        Say Hello
      </button>

      <button onClick{sayHello}>               // instance-method callback variation
        Say Hello
      </button>
    );
  }
}

EventHandler Arguments

You can bind arguments to the event-handler using lambda expressions in the event-handler.

// if the method signature accepta a param, it will be passed the element
<button onClick{(e) => this.deleteRow(id, e)}>Delete Row</button>
// 'this' refers to the element that triggered the event
<button onClick{this.deleteRow.bind(this, id)}>Delete Row</button>