Scribd
Upload
5 views

React events

React handles user events similarly to HTML, using camelCase syntax for event names and curly braces for event handlers. Functions can be passed as event handlers, and arguments can be sent using arrow functions. Additionally, event handlers have access to the React event object, allowing for more complex interactions.

Uploaded by

jayamala.vernekar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

React events

React handles user events similarly to HTML, using camelCase syntax for event names and curly braces for event handlers. Functions can be passed as event handlers, and arguments can be sent using arrow functions. Additionally, event handlers have access to the React event object, allowing for more complex interactions.

Uploaded by

jayamala.vernekar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Just like HTML DOM events, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.

Adding Events

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot} instead of onclick="shoot()".

React:Get your own React.js Server

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

Example:

Put the shoot function inside the Football component:

function Football() {

const shoot = () => {

alert("Great Shot!");

return (

<button onClick={shoot}>Take the shot!</button>

);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);

Run Example »

Passing Arguments
To pass an argument to an event handler, use an arrow function.

Example:

Send "Goal!" as a parameter to the shoot function, using arrow function:

function Football() {

const shoot = (a) => {

alert(a);

return (

<button onClick={() => shoot("Goal!")}>Take the shot!</button>

);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);

Run Example »

React Event Object

Event handlers have access to the React event that triggered the function.

In our example the event is the "click" event.

Example:

Arrow Function: Sending the event object manually:

function Football() {

const shoot = (a, b) => {

alert(b.type);

/*

'b' represents the React event that triggered the function,

in this case the 'click' event

*/

}
return (

<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>

);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);

Run Example »

This will come in handy when we look at Form in a later chapter.

You might also like