Events in React
onClick, onChange, onSubmit
onClick Event:
In below example created onclick event for the button.
OnClick even will fire when button is clicked in below example, Similar way we can use onClick event for anchor tag or label or any html tags.
Display.js
import React, { useState } from "react";
const Display = () => {
// The React useState Hook allows us to track state in a function component.
const [labelText, setLableText] = useState("");
//// Normal Function
// function btnClick() {
// setLableText("Clicked!");
// }
// Arrow Function
const btnClick = () => {
setLableText("Clicked!");
}
return (
<div>
<button onClick={btnClick}>Click</button>
<br />
<br />
<label>{labelText}</label>
</div>
)
}
export default Display;
Output: Before Click
Output: After Click
onChange Event:
In the below example when text value changed setting changed value to value variable using inpTextHandler event.
import React, { useEffect, useState } from "react";
const Display = () => {
// value
const [value,SetValue] = useState("")
// Setting text value when it is changed to value
const inpTextHandler = (e) => {
SetValue(e.target.value);
}
return(
<div style={{margin:'20px'}}>
<center>
<input type="text" placeholder="Enter a Value"
name="inpValue" onChange={inpTextHandler}></input>
<br />
<br />
{value}
</center>
</div>
)
};
export default Display;
onSubmit Event:
In the below example submit handler is called when form submit.
import React, { useEffect, useState } from "react";
const Display = (props) => {
// data
const [data, setData] = useState({
username: "",
password: "",
});
// destructring values
const { username, password } = data;
const ontextchange = (e) => {
setData({ ...data, [e.target.name]: [e.target.value] });
};
const submitHandler = (e) => {
e.preventDefault(); // Preventing default actions
// printing data to console
console.log(data);
};
return (
<div style={{ margin: "20px" }}>
<center>
<form onSubmit={submitHandler}>
<input
type="text"
name="username"
value={username}
onChange={ontextchange}
placeholder="Enter UserName"
></input>
<br />
<input
type="password"
name="password"
value={password}
onChange={ontextchange}
placeholder="Password"
></input>
<br />
<br />
<input type="submit" name="Submit"></input>
</form>
</center>
</div>
);
};
export default Display;
Output: (Play the video)
