React Event Handling onClick, onChange, onSubmit: Tutorial, Examples, FAQs & Interview Tips

What Is Event Handling?

Event handling in React means responding to user actions such as clicking a button, typing into an input, submitting a form, or pressing a key. React events look similar to HTML events, but they are written in JSX and usually connect to JavaScript functions defined inside the component.

HTML vs React Event Syntax

React uses camelCase event names such as onClick, onChange, and onSubmit. Instead of passing a string like in HTML, you pass a function reference.

<!-- HTML -->
<button onclick="showMessage()">Click</button>

// React
<button onClick={showMessage}>Click</button>

Click Events

function App() {
    function handleClick() {
        alert('Button clicked')
    }

    return <button onClick={handleClick}>Click Me</button>
}

Passing Arguments to Event Handlers

If a handler needs additional data, wrap the call in an arrow function.

function App() {
    function handleDelete(id) {
        console.log('Delete item:', id)
    }

    return <button onClick={() => handleDelete(5)}>Delete</button>
}

Input and Change Events

The onChange event is commonly used with controlled inputs. React stores the current value in state and updates it every time the user types.

import { useState } from 'react'

function SearchBox() {
    const [query, setQuery] = useState('')

    return (
        <input
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search..."
        />
    )
}

Form Submit Event

Forms in React usually handle submission with onSubmit. The handler often uses event.preventDefault() so the page does not reload.

function LoginForm() {
    function handleSubmit(event) {
        event.preventDefault()
        console.log('Form submitted')
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Login</button>
        </form>
    )
}

Keyboard Events

function SearchInput() {
    function handleKeyDown(event) {
        if (event.key === 'Enter') {
            console.log('Search now')
        }
    }

    return <input onKeyDown={handleKeyDown} placeholder="Press Enter" />
}

The Event Object

React passes an event object to handlers. It gives access to useful information such as the target element, typed value, key pressed, mouse position, and helper methods like preventDefault().

Common Real-World Patterns

Button clicks for opening modals, deleting rows, and triggering actions
Input change events for search fields and controlled forms
Submit handlers for login, registration, and checkout forms
Keyboard events for shortcuts and Enter-to-submit behavior

Common Mistakes

Mistake	Why it is wrong	Better approach
Calling the handler immediately in JSX	The function runs during render instead of on the event	Pass a function reference or arrow function
Forgetting `preventDefault()` on forms	The browser reloads the page	Call `event.preventDefault()` in submit handlers
Writing too much logic inline	JSX becomes harder to read	Move larger logic into named handler functions
Ignoring the event object when needed	Loses access to user input or key details	Use the event parameter when the handler depends on user input

Best Practices

Use descriptive handler names such as handleSubmit and handleDelete
Keep simple handlers inline only when they remain easy to read
Move bigger event logic into named functions
Use controlled inputs for tl-form-heavy components
Use the event object deliberately instead of ignoring it by habit

Summary

Event handling is how React components respond to user interaction. Whether the user clicks, types, submits, or presses a key, React connects those actions to JavaScript functions inside your components. Once you understand event handlers well, building interactive React UIs becomes much more natural.

Key Takeaways

React event handling connects user actions such as clicks, typing, and form submission to JavaScript functions.
React uses camelCase event names such as onClick, onChange, and onSubmit.
Handlers should usually be passed as function references, not called immediately during render.
The event object gives access to values, keys, and helper methods like preventDefault().
Controlled inputs commonly use onChange to keep input values in React state.
Clear handler names and simple event logic improve readability.