React events: Difference between revisions
From wikinotes
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
You can subscribe to [[ | You can subscribe to [[Html events|HTML DOM events]] with callbacks similarly to [[javascript]].<br> | ||
except that events are in camelcase <br> | except that events are in camelcase <br> | ||
and callbacks are defined as methods rather than strings. | and callbacks are defined as methods rather than strings. |
Revision as of 21:33, 10 December 2022
You can subscribe to HTML DOM events with callbacks similarly to javascript.
except that events are in camelcase
and callbacks are defined as methods rather than strings.
React DOM events are abstracted, so they behave the same on all browsers. See SyntheticEvent docs.
See https://reactjs.org/docs/handling-events.html
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>