Form Event
In React, handling form events is a crucial part of creating interactive and dynamic user interfaces.
|
Event |
Description |
|---|---|
| onChange |
This event triggers when the value of input tag changes. |
| onInput |
This event fires when the value of input field gets changed. |
| onSubmit |
This event triggers when user submit a form using Submit button. |
| onFocus |
This event fires when user click on any input tag and that tag active to enter data. |
| onBlur |
This event occurs when element is not longer active. |
React Events Reference
When the user interacts with the web application events are fired. That event can be a mouse click, a keypress, or something rare like connecting the battery with a charger. From the developer side, we need to ‘listen’ to such events and then make our application respond accordingly. This is called event handling which provides a dynamic interface to a webpage.
Syntax:
onEvent={function}
Now we will look at certain rules to keep in mind while creating events in React.
- camelCase Convention: Instead of using lowercase we use camelCase while giving names of the react events. That simply means we write ‘onClick’ instead of ‘onclick’.
- Pass the event as a function: In React we pass a function enclosed by curly brackets as the event listener or event handler, unlike HTML where we pass the event handler or event listener as a string.
- Prevent the default event: Just returning false inside the JSX element does not prevent the default behavior in react. Instead, we have to call the ‘preventDefault’ method directly inside the event handler function.
Example : In this example we implemented an onClick Event in it.
Javascript
// App.js import "./App.css"const App = () => { const function1 = (event) => { alert("Click Event Fired") } return ( <div className="App"> <h1>w3wiki</h1> <button onClick={function1}> Click Me! </button> </div> ); } export default App; |
CSS
/*App.css*/ .App { min-width: 30vw; margin: auto; text-align: center; color: green; font-size: 23px; } button { background-color: lightgray; height: 50px; width: 150px; margin: auto; border-radius: 6px; cursor: pointer; } |
Output:
Contact Us