React events: Difference between revisions

From wikinotes
No edit summary
No edit summary
Line 1: Line 1:
You can subscribe to [[Html events|HTML DOM events]] with callbacks in a similar fashion to [[javascript]].<br>
You can subscribe to a subset of [[Html events|HTML DOM events]] with callbacks in a similar fashion to [[javascript]].<br>
However, within react:  
However, within react:  
* events are camelcased  
* events are camelcased  
Line 10: Line 10:
{| class="wikitable"
{| class="wikitable"
|-
|-
| Event Handling Docs || https://reactjs.org/docs/handling-events.html
| SyntheticEvent Docs || https://reactjs.org/docs/events.html
|-
|-
| SyntheticEvent Docs || https://reactjs.org/docs/events.html
| Event Handling Tutorial || https://reactjs.org/docs/handling-events.html
|-
|-
|}
|}

Revision as of 01:17, 11 December 2022

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>