Объект Event в React


Внутри функции, привязанной к обработчику событий, доступен объект Event:

function App() {
function func(event) {
console.log(event); // объект с событием
}

return <div>
<button onClick={func}>act</button>
</div>;
}
В переменную event попадает не родной объект Event браузера, а специальная кроссбраузерная обертка над ним со стороны React. Эта обертка называется SyntheticEvent. Эта обертка помогает событиям работать одинаково во всех браузерах. У нее такой же интерфейс, как и у нативного события, включая методы stopPropagation() и preventDefault().

Объект Event при передачи параметров
Пусть у нас есть некоторая функция func, которую мы хотим использовать в качестве обработчика события. Пусть эта функция принимает некоторый параметр:

function func(arg) {
console.log(arg);
}
Давайте используем эту функцию в качестве обработчика, передав ей параметр:

function App() {
function func(arg) {
console.log(arg);
}

return <div>
<button onClick={() => func('eee')}>act</button>
</div>;
}
Пусть теперь кроме параметра мы хотим получить в нашей функции объект Event. Для этого нам нужно поступить следующим образом:

function App() {
function func(arg, event) {
console.log(arg, event);
}

return <div>
<button onClick={event => func('eee', event)}>act</button>
</div>;
}