Trabalhar com eventos do usuário

  • 3 minutos

Os eventos permitem que você execute código em resposta a ações do usuário em seu aplicativo. Como o JSX é baseado em JavaScript, XML e HTML, adicionar 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 é selecionado, por exemplo, você pode usar o seguinte código:

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

Como você pode suspeitar, podemos criar uma função para ouvir um evento também. Adicionamos a função ao nosso componente. Em seguida, chamamos isso usando a mesma sintaxe que usamos 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>
    }
}