React Basics — Events

Credits : Prince Rai

React.js Events are similar to HTML DOM events like click, change, etc.
Syntax
1. Camel case is used to write react.js events .Like onclick event will be written as “onClick”.
2. React.js event handlers are written within curly braces. Like onClick={//Define function or functionName}.

Get Kumariashish’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Below are some basic react.js events :

1. onClick Event

There are different ways of calling and defining functions for event handlers.
1. Defining function in JSX. We should use ()=>{} .

Example of onClick Event

2. Define function before return statement and inside JSX call its name in event handler.

Output

3. Adding parameters in function. In event handler, use ()=>functionName(arg1, arg2, …)

parameters in event hanlder function

output

2. onChange Event

onChange event

output

3. onSubmit Event

onSubmit event

Output

Summary

1. What are react.js events
2. onChange event
3. onClick event
4. onSubmit event