Praca ze zdarzeniami użytkownika

  • 3 min

Zdarzenia umożliwiają uruchamianie kodu w odpowiedzi na akcje użytkownika w aplikacji. Ponieważ język JSX jest oparty na językach JavaScript, XML i HTML, dodawanie odbiorników zdarzeń wygląda stosunkowo znajomo.

Atrybuty są dodawane do kodu HTML, aby wskazać nazwę zdarzenia, które chcesz obsłużyć. Jeśli chcesz użyć alert polecenia , aby wyświetlić komunikat po wybraniu przycisku, możesz na przykład użyć następującego kodu:

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

Jak można podejrzewać, możemy utworzyć funkcję do nasłuchiwania zdarzenia. Dodamy funkcję do naszego składnika. Następnie wywołujemy ją przy użyciu tej samej składni, która była używana dla elementu alert.

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

Parametry można również przekazać do procedury obsługi zdarzeń zgodnie z potrzebami.

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}