React onInput Event Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report React onInput is an event handler that triggers then there is any change in the input field. It is fired immediately when the user is changing input. It is one of the form events that updates when the input field is modified. It is similar to the HTML DOM oninput event but uses the camelCase convention in React. Syntax:<input onInput={handleChange} >Parameter:handleChange: It is a function call that includes the code to be executed when an event triggersReturn type: event: It is an event object containing information about the event like target element and valuesExample 1: This example demonstrates the use of the onInput event handler to update the states in React. JavaScript // Filename - App.js import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); function handleChange(e) { setValue(e.target.value); } return ( <div style={{ textAlign: "center", margin: "auto" }} > <h1 style={{ color: "Green" }}> GeeksforGeeks </h1> <h3>Exemple for React onInput Event Handler</h3> <input value={value} onInput={handleChange} /> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Example 2: This example demonstrate the use of the onInput event handler in select input. JavaScript Javascript// Filename - App.js import React, { useState } from "react"; function App() { const [value, setValue] = useState("HTML"); function handleChange(e) { setValue(e.target.value); } return ( <div style={{ textAlign: "center", margin: "auto" }} > <h1 style={{ color: "Green" }}> GeeksforGeeks </h1> <h3> Exemple for React onChange Event Handler </h3> <select value={value} onInput={handleChange}> <option value={"HTML"}>HTML</option> <option value={"CSS"}>CSS</option> <option value={"JavaScript"}> JavaScript </option> </select> {/* <input value={value} onChange={handleChange} /> */} <br /> <br /> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Comment More infoAdvertise with us Next Article React onBlur Event J jatinsharmatu54 Follow Improve Article Tags : Web Technologies ReactJS React Events Similar Reads React onPaste Event React onPaste event is an event handler which triggers when a user pastes any text or data in any tag inside the browser. It is mostly used on <input> tags. Paste can be done through shortcut keys (CTRL + V) or the Paste button present inside the menu.It is similar to the HTML DOM onpaste even 2 min read React onSubmit Event The onSubmit event in React is an event handler that is triggered when a form is submitted. It allows you to handle form submissions and allows you to control what happens when a user submits a form, such as form validation, preventing the default submission behaviour, and executing custom logic lik 5 min read React onBlur Event In React, handling user interactions efficiently is important for building responsive and dynamic applications. One of the commonly used events for managing focus behaviour is the onBlur event. This event is important for tracking when a user moves the focus away from an element, such as an input fi 6 min read React onCopy Event React onCopy Clipboard event is an event handler which detects the copy process in the browser using JavaScript. When the user starts copying data through the shortcut key (CTRL + C) or the copy button present in the menu, this even automatically fires, and the function passed to it will call itself 2 min read React onKeyUp Event React onKeyUp is an event listener that is used to detect the key release event in a browser using JavaScript. This event occurs once after the key is pressed and released.It is similar to the HTML DOM onkeyup event but uses the camelCase convention in React.Syntax:<input onKeyUp={keyUpFunction}/ 2 min read React onFocus event The onFocus event in React is triggered when an element receives focus, meaning it becomes the active element that can accept user input. This event is commonly used to execute functions or perform actions when an element gains focus. It is similar to the HTML DOM onfocus event but uses the camelCas 2 min read Like