Trabalhar com eventos do usuário

Concluído

Os eventos permitem que você execute o código em resposta às ações do usuário em seu aplicativo. Como o JSX é criado em JavaScript, XML e HTML, a adição de ouvintes de eventos parece relativamente familiar.

Você adiciona atributos ao HTML para indicar o nome do evento que deseja manipular. Se você quiser usar alert para exibir uma mensagem quando um botão for selecionado, por exemplo, pode usar o seguinte código:

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

Como você pode suspeitar, também podemos criar uma função para escutar um evento. Adicionamos a função ao nosso componente. Em seguida, a chamamos usando a mesma sintaxe usada para alert.

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

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

Também podemos passar parâmetros para o manipulador de eventos conforme necessário.

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

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