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 | You can subscribe to [[Html events|HTML DOM events]] with callbacks in a similar fashion to [[javascript]].<br> | ||
However, within react: | |||
* events are camelcased | |||
* callbacks are methods (inside <code>{...}</code>) 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. | ||
= Documentation = | = Documentation = |
Revision as of 21:35, 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
{...}
) 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>