Zdarzenia w React: onClick, onChange, onSubmit i inne

React obsługuje zdarzenia przez propsy nazwane od zdarzenia w camelCase, takie jak onClick, onChange i onSubmit. Przekazujesz funkcję, a React wywołuje ją z obiektem zdarzenia, gdy użytkownik kliknie, pisze albo wyśle formularz.

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>;
}

Każde kliknięcie uruchamia handleClick, który aktualizuje licznik i wypisuje log w konsoli pod podglądem. Wypróbuj onDoubleClick zamiast onClick: teraz liczy się tylko podwójne kliknięcie.

Przekaż funkcję, nie wywołuj jej

Prop przyjmuje funkcję, a React wywołuje ją później. Bardzo częstym błędem jest dodanie nawiasów, co wywołuje funkcję od razu, podczas renderowania, i oddaje Reactowi zamiast niej jej wartość zwracaną.

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>
    );
}

Konsola pokazuje "Hi, during render", zanim czegokolwiek dotkniesz: React uruchomił sayHi podczas renderowania pierwszego przycisku, a ponieważ sayHi zwraca undefined, ten przycisk w ogóle nie ma handlera. Kliknięcie Wrong nic nie robi. Kliknięcie Right wypisuje "Hi, Ada", bo funkcja strzałkowa uruchamia się dopiero po kliknięciu.

Strzałka to też sposób na przekazywanie argumentów. onClick={() => removeItem(item.id)} tworzy małą funkcję dla każdego elementu, a ta funkcja wywołuje twoją z właściwym ID. Jeśli handler nie przyjmuje argumentów, przekaż go po nazwie: onClick={handleClick}.

Z setterem stanu ten błąd jest jeszcze gorszy: onClick={setCount(count + 1)} ustawia stan podczas renderowania, co renderuje ponownie, co znowu ustawia stan, a React zatrzymuje się z komunikatem "Too many re-renders".

Obiekt zdarzenia

React przekazuje każdemu handlerowi jeden argument, obiekt zdarzenia. Ma on te same właściwości co zdarzenie przeglądarki: e.target to element, na którym zdarzenie wystąpiło, e.key to naciśnięty klawisz, e.preventDefault() anuluje domyślną akcję przeglądarki. React opakowuje natywne zdarzenie w coś, co nazywa zdarzeniem syntetycznym, więc działa ono tak samo w każdej przeglądarce; oryginał jest w e.nativeEvent, gdybyś go kiedyś potrzebował.

Najczęściej używasz dwóch: e.target.value w onChange i e.key w 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>
    );
}

Wpisz hooks i naciśnij Enter: tag zostaje dodany, a pole się czyści. Konsola wypisuje każdy klawisz, w tym Shift, Backspace i Enter, pod nazwami z e.key. Naciśnij Escape w połowie słowa, żeby je odrzucić.

onChange w React uruchamia się przy każdym naciśnięciu klawisza. W zwykłym HTML zdarzenie change na polu tekstowym uruchamia się dopiero, gdy pole traci fokus, więc to celowa różnica: pozwala polu i stanowi iść krok w krok, litera po literze. Pola wyboru dają e.target.checked zamiast value. Strona o formularzach omawia każdy typ pola.

Formularze i preventDefault

Gdy formularz zostaje wysłany, domyślną akcją przeglądarki jest wysłanie go i załadowanie nowej strony. W aplikacji React prawie zawsze chcesz sam obsłużyć dane, więc handler wysyłania zaczyna się od 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>
    );
}

Umieść onSubmit na <form>, a nie onClick na przycisku: wtedy naciśnięcie Enter w polu też wysyła formularz, a własne sprawdzenia przeglądarki (tu required i type="email") wykonują się najpierw. Usuń linię e.preventDefault() i wyślij ponownie: prawdziwa strona przeszłaby teraz na nową stronę i zgubiła podziękowanie. Podgląd to blokuje i zamiast tego pokazuje, co wysłałby formularz, email= bez wartości, bo setEmail('') wyczyściło już pole, zanim formularz został odczytany.

React 19 pozwala też przekazać funkcję do <form action={fn}>, która dostaje dane formularza i sama resetuje niekontrolowane pola. Strona o formularzach pokazuje oba style.

Propagacja i stopPropagation

Większość zdarzeń propaguje się w górę (bubbling): po wykonaniu na klikniętym elemencie wykonują się na jego rodzicu, potem na rodzicu rodzica, aż do samej góry. Handlery Reacta zachowują tę samą kolejność. Dlatego kliknięcie przycisku wewnątrz klikalnej karty liczy się też jako kliknięcie karty.

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>
    );
}

Kliknij Bubbles up, a konsola wypisze przycisk, potem wewnętrzny panel, potem zewnętrzną kartę. Kliknij Stops here, a wypisze się tylko przycisk: e.stopPropagation() kończy wspinaczkę. Kliknięcie tekstu samego wewnętrznego panelu wypisuje panel i kartę.

Używaj stopPropagation oszczędnie. Częsty uzasadniony przypadek to przycisk usuwania w klikalnym wierszu listy, gdzie kliknięcie usuwania nie powinno też otwierać wiersza. Jeśli rodzic musi wiedzieć, czy kliknięcie przyszło od dziecka, sprawdź e.target zamiast zatrzymywać zdarzenie. Żeby uruchomić handler w drodze w dół, zanim zdarzenie zobaczą dzieci, React oferuje wersje dla fazy przechwytywania, takie jak onClickCapture.

preventDefault i stopPropagation to różne narzędzia. Pierwsze anuluje to, co zrobiłaby przeglądarka (przejście po linku, wysłanie formularza, zaznaczenie pola wyboru). Drugie sprawia, że inne handlery nie dowiedzą się o zdarzeniu. Wywołanie jednego nie robi tego, co drugie.

Inne popularne zdarzenia

Ten sam wzorzec obejmuje każde zdarzenie, które obsługuje React. Kilka, których będziesz często używać:

• onFocus i onBlur uruchamiają się, gdy pole zyskuje i traci fokus, przydatne do pokazywania walidacji, gdy użytkownik opuści pole.
• onMouseEnter i onMouseLeave uruchamiają się, gdy wskaźnik wchodzi na element i z niego schodzi. W odróżnieniu od większości zdarzeń nie propagują się w górę, więc przesunięcie wskaźnika z rodzica na jego dziecko nie uruchamia ponownie onMouseEnter rodzica.
• onPointerDown, onPointerMove i onPointerUp działają tak samo dla myszy, dotyku i pióra, dlatego lepiej sprawdzają się przy przeciąganiu.
• onScroll uruchamia się, gdy element jest przewijany. W React nie propaguje się w górę.

Każdy handler dostaje obiekt zdarzenia z właściwościami, które mają dla niego sens: e.clientX dla zdarzeń wskaźnika, e.key dla zdarzeń klawiatury, e.target dla wszystkich.

Przekazywanie handlerów jako propsów

Komponenty mogą przyjmować handlery od rodzica jak każdy inny prop. Nazywaj je onSomething od tego, co się stało, a funkcję, która to obsługuje, handleSomething. To odzwierciedla wbudowane zdarzenia i od razu pokazuje, które propsy są callbackami.

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 nie jest właścicielem liczby; zgłasza kliknięcia, a rodzic decyduje, co oznaczają. Zmień handleDecrement tak, żeby zatrzymywał się na 1 zamiast 0, a stepper się dostosuje bez edytowania go. Trzymanie stanu w rodzicu i przekazywanie handlerów w dół to wzorzec opisany w podnoszeniu stanu.

Własne propsy handlerów to tylko nazwy. onIncrement na twoim komponencie nic nie robi, dopóki komponent nie przekaże go do onClick prawdziwego elementu, a możesz mu dać dowolne argumenty, na przykład onSelect(item.id).