React Events Example
This example demonstrates the implementation of Event Handler in React.
Javascript
// Filename - App.js import { useState } from "react" ; import "./App.css" ; function App() { const [inp, setINP] = useState( "" ); const [name, setName] = useState( "" ); const clk = () => { setName(inp); setINP( "" ); }; return ( <div className= "App" > <h1>w3wiki</h1> \ {name ? <h2>Your Name:{name}</h2> : null } <input type= "text" placeholder= "Enter your name..." onChange={(e) => setINP(e.target.value)} value={inp} /> <button onClick={clk}>Save</button>{ " " } </div> ); } export default App; |
Output:
React Events
React Events are user interactions with the web application, such as clicks, keyboard input, and other actions that trigger a response in the user interface. Just like HTML DOM, React also acts upon the events.
Table of Content
- React Events
- Commonly Used React Events
- Adding React Events
- Passing Arguments in React Events
- React Event Object