Работа с событиями пользователей

Завершено

События позволяют выполнять код в ответ на действия пользователей в приложении. Так как JSX основан на JavaScript, XML и HTML, добавление прослушивателей событий выглядит относительно знакомым.

Атрибуты добавляются в HTML, чтобы указать имя события, которое требуется обрабатывать. Если вы хотите использовать alert для отображения сообщения при выборе кнопки, например, можно использовать следующий код:

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

Как вы можете подозревать, мы можем создать функцию для прослушивания события. Мы добавим функцию в наш компонент. Затем мы вызываем его с помощью того же синтаксиса, который мы использовали для alert.

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

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

При необходимости можно передать параметры в обработчик событий.

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

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