Arbeta med användarhändelser

  • 3 minuter

Med händelser kan du köra kod som svar på användaråtgärder i ditt program. Eftersom JSX bygger på JavaScript, XML och HTML ser det relativt bekant ut att lägga till händelselyssnare.

Du lägger till attribut i HTML-koden för att ange namnet på den händelse som du vill hantera. Om du till exempel vill använda alert för att visa ett meddelande när en knapp har valts kan du använda följande kod:

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

Som du kanske misstänker kan vi också skapa en funktion för att lyssna på en händelse. Vi lägger till funktionen i vår komponent. Vi anropar det sedan med samma syntax som vi använde för alert.

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

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

Vi kan också skicka parametrar till händelsehanteraren efter behov.

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

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