Eventi in React: onClick, onChange, onSubmit e altri

React gestisce gli eventi con props che prendono il nome dall'evento in camelCase, come onClick, onChange e onSubmit. Passi una funzione, e React la chiama con un oggetto evento quando l'utente clicca, scrive o invia.

import { useState } from 'react';

export default function App() {
    const [likes, setLikes] = useState(0);

    function handleClick() {
        setLikes(likes + 1);
        console.log('Liked');
    }

    return <button onClick={handleClick}>Like ({likes})</button>;
}

Ogni clic esegue handleClick, che aggiorna il conteggio e scrive nella console sotto l'anteprima. Prova onDoubleClick al posto di onClick: ora conta solo il doppio clic.

Passa la funzione, non chiamarla

La prop riceve una funzione, e React la chiama più tardi. Un errore molto comune è aggiungere le parentesi, che chiamano subito la funzione, durante il rendering, e consegnano a React il suo valore restituito.

function sayHi(name) {
    console.log('Hi, ' + name);
}

export default function App() {
    return (
        <div>
            <button onClick={sayHi('during render')}>Wrong</button>{' '}
            <button onClick={() => sayHi('Ada')}>Right</button>
        </div>
    );
}

La console mostra "Hi, during render" prima ancora che tu tocchi qualcosa: React ha eseguito sayHi mentre renderizzava il primo pulsante, e poiché sayHi restituisce undefined, quel pulsante non ha alcun gestore. Cliccare Wrong non fa nulla. Cliccare Right scrive "Hi, Ada", perché la arrow function viene eseguita solo al clic.

La arrow è anche il modo per passare argomenti. onClick={() => removeItem(item.id)} crea una piccola funzione per ogni voce, e quella funzione chiama la tua con l'ID giusto. Se un gestore non accetta argomenti, passalo per nome: onClick={handleClick}.

Con un setter di stato l'errore è peggiore: onClick={setCount(count + 1)} imposta lo stato durante il rendering, che provoca un nuovo render, che imposta di nuovo lo stato, e React si ferma con "Too many re-renders".

L'oggetto evento

React passa a ogni gestore un argomento, l'oggetto evento. Ha le stesse proprietà dell'evento del browser: e.target è l'elemento su cui è avvenuto l'evento, e.key è il tasto premuto, e.preventDefault() annulla l'azione predefinita del browser. React racchiude l'evento nativo in quello che chiama synthetic event, così si comporta allo stesso modo in ogni browser; l'originale si trova in e.nativeEvent se mai ti servisse.

I due che userai di più sono e.target.value in onChange ed e.key in onKeyDown.

import { useState } from 'react';

export default function App() {
    const [text, setText] = useState('');
    const [tags, setTags] = useState(['react']);

    function handleKeyDown(e) {
        console.log('key:', e.key);
        if (e.key === 'Enter' && text.trim() !== '') {
            setTags([...tags, text.trim()]);
            setText('');
        }
        if (e.key === 'Escape') {
            setText('');
        }
    }

    return (
        <div>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="Type a tag, press Enter"
            />
            <p>Tags: {tags.join(', ')}</p>
        </div>
    );
}

Scrivi hooks e premi Invio: il tag viene aggiunto e il campo si svuota. La console registra ogni tasto, inclusi Shift, Backspace ed Enter, con i nomi che compaiono in e.key. Premi Esc a metà di una parola per scartarla.

L'onChange di React scatta a ogni tasto. In HTML semplice l'evento change su un campo di testo scatta solo quando perde il focus, quindi questa è una differenza voluta: permette all'input e allo stato di procedere di pari passo, lettera per lettera. Le checkbox ti danno e.target.checked invece di value. La pagina sui form tratta ogni tipo di input.

Form e preventDefault

Quando un form viene inviato, l'azione predefinita del browser è spedirlo e caricare una nuova pagina. In un'app React quasi sempre vuoi gestire i dati da te, quindi il gestore di invio inizia con e.preventDefault().

import { useState } from 'react';

export default function App() {
    const [email, setEmail] = useState('');
    const [sent, setSent] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        console.log('Subscribing', email);
        setSent(email);
        setEmail('');
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="email"
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
            />{' '}
            <button type="submit">Subscribe</button>
            {sent && <p>Thanks, {sent} is on the list.</p>}
        </form>
    );
}

Metti onSubmit sul <form>, non onClick sul pulsante: così anche premere Invio nel campo invia il form, e i controlli del browser (qui required e type="email") vengono eseguiti per primi. Elimina la riga e.preventDefault() e invia di nuovo: una pagina reale ora passerebbe a una nuova pagina e perderebbe il messaggio di ringraziamento. L'anteprima lo blocca e mostra invece cosa invierebbe il form, email= senza valore, perché setEmail('') aveva già svuotato il campo quando il form è stato letto.

React 19 ti permette anche di passare una funzione a <form action={fn}>, che riceve i dati del form e azzera per te i campi non controllati. La pagina sui form mostra entrambi gli stili.

Bubbling e stopPropagation

La maggior parte degli eventi risale (bubbling): dopo essere stati eseguiti sull'elemento che hai cliccato, vengono eseguiti sul suo genitore, poi sul genitore del genitore, fino in cima. I gestori React seguono lo stesso ordine. È per questo che un clic su un pulsante dentro una card cliccabile conta anche come clic sulla card.

const box = { padding: 12, border: '1px solid #bbb', borderRadius: 6, marginTop: 8 };

export default function App() {
    return (
        <div style={box} onClick={() => console.log('3. outer card')}>
            Outer card
            <div style={box} onClick={() => console.log('2. inner panel')}>
                Inner panel
                <div style={{ marginTop: 8 }}>
                    <button onClick={() => console.log('1. button')}>Bubbles up</button>{' '}
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            console.log('1. button that stops here');
                        }}
                    >
                        Stops here
                    </button>
                </div>
            </div>
        </div>
    );
}

Clicca Bubbles up e la console registra il pulsante, poi il pannello interno, poi la card esterna. Clicca Stops here e viene registrato solo il pulsante: e.stopPropagation() interrompe la risalita. Cliccare il testo del pannello interno registra il pannello e la card.

Usa stopPropagation con parsimonia. Un caso legittimo comune è un pulsante di eliminazione dentro una riga di lista cliccabile, dove cliccare elimina non dovrebbe anche aprire la riga. Se un genitore deve sapere se il clic è arrivato da un figlio, controlla e.target invece di fermare l'evento. Per eseguire invece un gestore durante la discesa, prima che i figli vedano l'evento, React offre le versioni di cattura come onClickCapture.

preventDefault e stopPropagation sono strumenti diversi. Il primo annulla ciò che farebbe il browser (seguire un link, inviare un form, spuntare una checkbox). Il secondo impedisce agli altri gestori di venire a sapere dell'evento. Chiamarne uno non fa l'altro.

Altri eventi comuni

Lo stesso schema copre ogni evento supportato da React. Alcuni che userai spesso:

• onFocus e onBlur scattano quando un input ottiene e perde il focus, utili per mostrare la validazione dopo che l'utente lascia un campo.
• onMouseEnter e onMouseLeave scattano quando il puntatore entra in un elemento e ne esce. A differenza della maggior parte degli eventi non risalgono, quindi spostare il puntatore da un genitore a un suo figlio non fa scattare di nuovo l'onMouseEnter del genitore.
• onPointerDown, onPointerMove e onPointerUp funzionano allo stesso modo per mouse, touch e penna, il che li rende la scelta migliore per il trascinamento.
• onScroll scatta mentre un elemento scorre. In React non risale.

Ogni gestore riceve un oggetto evento con le proprietà che hanno senso per lui: e.clientX per gli eventi del puntatore, e.key per quelli della tastiera, e.target per tutti.

Passare gestori come props

I componenti possono accettare gestori dal loro genitore come qualsiasi altra prop. Chiamali onSomething in base a ciò che è successo, e chiama la funzione che lo gestisce handleSomething. Questo rispecchia gli eventi integrati e rende evidente quali props sono callback.

import { useState } from 'react';

function Stepper({ value, onIncrement, onDecrement }) {
    return (
        <span>
            <button onClick={onDecrement}>-</button>
            <b style={{ margin: '0 8px' }}>{value}</b>
            <button onClick={onIncrement}>+</button>
        </span>
    );
}

export default function App() {
    const [qty, setQty] = useState(1);

    function handleIncrement() {
        setQty(qty + 1);
    }
    function handleDecrement() {
        setQty(Math.max(0, qty - 1));
    }

    return (
        <p>
            Quantity: <Stepper value={qty} onIncrement={handleIncrement} onDecrement={handleDecrement} />
        </p>
    );
}

Stepper non possiede il numero; segnala i clic e il genitore decide cosa significano. Cambia handleDecrement in modo che si fermi a 1 invece che a 0 e lo stepper si adegua senza essere modificato. Tenere lo stato nel genitore e passare i gestori verso il basso è lo schema descritto in sollevare lo stato.

Le props di gestori personalizzate sono solo nomi. onIncrement sul tuo componente non fa nulla finché il componente non lo passa all'onClick di un elemento reale, e puoi dargli gli argomenti che vuoi, per esempio onSelect(item.id).