React events

From wikinotes

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.


SyntheticEvent Docs
Event Handling Tutorial


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

class HelloWorld extends React.Component {
  sayHello() {

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

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

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>