​React Обработка событий

Обработка событий в React-элементах очень похожа на обработку событий в DOM-элементах.

Но есть несколько синтаксических отличий:
1. События в React именуются в стиле camelCase вместо нижнего регистра.
2. С JSX вы передаёте функцию как обработчик события вместо строки.
<button onClick={activateLasers}> Активировать лазеры </button> в React нельзя предотвратить обработчик события по умолчанию, вернув false. Нужно явно вызвать preventDefault.
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('По ссылке кликнули.'); } return ( <a href="#" onClick={handleClick}> Нажми на меня </a> ); } Внутри цикла часто нужно передать дополнительный аргумент в обработчик события. Например, если id — это идентификатор строки, можно использовать следующие варианты:
<button onClick={(e) => this.deleteRow(id, e)}>Удалить строку</button> <button onClick={this.deleteRow.bind(this, id)}>Удалить строку</button> Две строки выше — эквивалентны.

В обоих случаях аргумент e, представляющий событие React, будет передан как второй аргумент после идентификатора. Используя стрелочную функцию, необходимо передавать аргумент явно, но с bind любые последующие аргументы передаются автоматически.