Давайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.
Пусть у нас есть функция showMess,
которая выводит алерт с сообщением, а в HTML
коде есть кнопка, по клику на которую нам
и хотелось бы видеть этот алерт:
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>;
}
Сделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.
Параметры в функции
Пусть наша функция showMess параметром
принимает имя того, с кем мы хотим поздороваться:
function showMess(name) {
alert('hello, ' + name);
}
Можно передать этот параметр при привязывании функции к событию. Для этого вызов нашей функции следует обернуть в стрелочную функцию:
function App() {
function showMess(name) {
alert('hello, ' + name);
}
return <div>
<button onClick={() => showMess('user')}>show</button>
</div>;
}
Таким образом мы можем привязать одну и ту же функцию к нескольким кнопкам с разными параметрами:
function App() {
function showMess(text) {
alert(text);
}
return <div>
<button onClick={() => showMess('user1')}>show1</button>
<button onClick={() => showMess('user2')}>show2</button>
</div>;
}
Даны три кнопки:
function App() {
return <div>
<button>act1</button>
<button>act2</button>
<button>act3</button>
</div>;
}
Сделайте так, чтобы по клику на первую кнопку
алертом выводилось число 1, по клику
на вторую кнопку - число 2, а по клику
на третью - число 3.