React events
From wikinotes
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
{...}
) 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>