React Event Handling

Events in React

React uses synthetic events — a cross-browser wrapper around native DOM events. Event handlers in React are camelCase (onClick, not onclick) and receive a function, not a string.

HTML	React
`onclick="handler()"`	`onClick={handler}`
`onchange="handler()"`	`onChange={handler}`
`onsubmit="handler()"`	`onSubmit={handler}`
`onkeydown="handler()"`	`onKeyDown={handler}`
`onmouseover="handler()"`	`onMouseOver={handler}`

Event Handling — Click, Input, Form, Keyboard

import { useState } from 'react'

function EventExamples() {
    const [message, setMessage] = useState('')

    // Click event
    const handleClick = () => setMessage('Button clicked!')

    // Click with event object
    const handleClickWithEvent = (e) => {
        console.log('Target:', e.target)
        console.log('Type:', e.type)
        setMessage(`Clicked at (${e.clientX}, ${e.clientY})`)
    }

    // Pass arguments to handler
    const handleItemClick = (id, name) => {
        setMessage(`Clicked: ${name} (id: ${id})`)
    }

    // Prevent default behavior
    const handleLinkClick = (e) => {
        e.preventDefault()  // stop navigation
        setMessage('Link click prevented!')
    }

    // Stop event propagation
    const handleInnerClick = (e) => {
        e.stopPropagation()  // don't bubble to parent
        setMessage('Inner clicked (not outer)')
    }

    // Keyboard events
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') setMessage('Enter pressed!')
        if (e.key === 'Escape') setMessage('Escape pressed!')
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault()
            setMessage('Ctrl+S pressed!')
        }
    }

    const items = [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
    ]

    return (
        <div>
            <p>{message}</p>

            <button onClick={handleClick}>Simple Click</button>
            <button onClick={handleClickWithEvent}>Click with Event</button>

            {/* Pass args — use arrow function wrapper */}
            {items.map(item => (
                <button key={item.id} onClick={() => handleItemClick(item.id, item.name)}>
                    {item.name}
                </button>
            ))}

            <a href="https://example.com" onClick={handleLinkClick}>Prevented Link</a>

            <div onClick={() => setMessage('Outer clicked')} style={{padding:'20px', background:'#eee'}}>
                Outer
                <button onClick={handleInnerClick}>Inner (stops propagation)</button>
            </div>

            <input onKeyDown={handleKeyDown} placeholder="Press Enter, Escape, or Ctrl+S" />
        </div>
    )
}

import { useState } from 'react'

function ContactForm() {
    const [form, setForm] = useState({ name: '', email: '', message: '' })
    const [submitted, setSubmitted] = useState(false)

    const handleChange = (e) => {
        const { name, value } = e.target
        setForm(prev => ({ ...prev, [name]: value }))
    }

    const handleSubmit = (e) => {
        e.preventDefault()  // prevent page reload
        console.log('Form data:', form)
        setSubmitted(true)
    }

    if (submitted) return <p>Thanks, {form.name}! We'll be in touch.</p>

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="name"
                value={form.name}
                onChange={handleChange}
                placeholder="Your name"
                required
            />
            <input
                name="email"
                type="email"
                value={form.email}
                onChange={handleChange}
                placeholder="Your email"
                required
            />
            <textarea
                name="message"
                value={form.message}
                onChange={handleChange}
                placeholder="Your message"
                rows={4}
            />
            <button type="submit">Send</button>
        </form>
    )
}

Previous Next

React Event Handling

Events in React

Ready to Level Up Your Skills?