Навешивание событий в JSX
Давайте теперь изучим работу с событиями
на React. К примеру, сделаем так, чтобы по
клику на блок выводился alert с некоторым текстом.
Пусть у нас есть функция showMess,
которая выводит alert с сообщением, а в HTML
коде есть кнопка, по клику на которую нам
и хотелось бы видеть этот alert:
function App() {
function showMess() {
alert('hello');
}
return <div>
<button>show</button>
</div>;
}
Давайте привяжем к нашей кнопке событие onclick
так, чтобы по клику на этот див срабатывала
функция showMess. Для этого нужно
добавить атрибут onClick (именно в
camelCase, то есть onClick, а не onclick),
а в нем указать функцию, которая выполнится
по этому событию:
function App() {
function showMess() {
alert('hello');
}
return <div>
<button onClick={showMess}>show</button>
</div>;
}
Таким образом и происходит работа с событиями:
добавляется атрибут (к примеру, onClick
или onFocus), значением атрибута указывается
метод, который будет вызван по этому событию.
Дан следующий код:
function App() {
function show1() {
alert(1);
}
function show2() {
alert(2);
}
return <div>
<button>act1</button>
<button>act2</button>
</div>;
}
Сделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.