Trabajo con eventos de usuario

Completado

Los eventos permiten ejecutar código en respuesta a las acciones del usuario en la aplicación. Dado que JSX se basa en JavaScript, XML y HTML, la incorporación de escuchas de eventos resulta relativamente familiar.

Se agregan atributos al código HTML para indicar el nombre del evento que quiere controlar. Por ejemplo, si quiere usar alert para mostrar un mensaje cuando se selecciona un botón, puede usar el código siguiente:

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

Como podría imaginar, también podemos crear una función para escuchar un evento. Agregamos la función a nuestro componente. Después, se llama con la misma sintaxis que se utiliza para alert.

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

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

También podemos pasar parámetros al controlador de eventos, según sea necesario.

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

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