React events: Difference between revisions

From wikinotes
No edit summary
No edit summary
Line 2: Line 2:
However, within react:  
However, within react:  
* events are camelcased  
* events are camelcased  
* callbacks are methods (inside <code>{...}</code>) instead of strings
* callbacks are methods (inside <code>{}</code>s) instead of strings


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

Revision as of 21:36, 10 December 2022

You can subscribe to 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

Event Handling Docs https://reactjs.org/docs/handling-events.html
SyntheticEvent Docs https://reactjs.org/docs/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>