Реагировать Учебник

Реагировать Главная Реагировать Введение Реагировать Начать Реагировать ES6 Реагировать на визуализацию HTML Реагировать JSX Реагировать Компоненты Реагировать на класс Реагировать на реквизиты Реагировать на события Реагировать на условия Реагировать списки Реагировать на формы Реактивный маршрутизатор Реагировать на заметку Реагировать на стили CSS Реагировать на стиль Sass

Реагировать на крючки

Что такое крючок? использование состояния использованиеЭффект использованиеконтекста useRef использованиередьюсер использоватьОбратный звонок useMemo Пользовательские крючки

Упражнения по реагированию

Ответная викторина Упражнения по реагированию Сертификат реакции

Реагировать на события


Как и события HTML DOM, React может выполнять действия на основе пользовательских событий.

React имеет те же события, что и HTML: щелчок, изменение, наведение мыши и т. д.


Добавление событий

События React записываются в синтаксисе camelCase:

onClick вместо onclick.

Обработчики событий React записываются внутри фигурных скобок:

onClick={shoot}  вместо onClick="shoot()".

Реагировать:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

Пример:

Поместите shootфункцию внутрь Footballкомпонента:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


w3schools CERTIFIED . 2022

Получите сертификат!

Завершите модули React, выполните упражнения, сдайте экзамен и получите сертификат w3schools!!

ЗАПИСАТЬСЯ НА 95 $

Передача аргументов

Чтобы передать аргумент обработчику событий, используйте функцию стрелки.

Пример:

Отправить "Гол!" в качестве параметра shoot функции, используя функцию стрелки:

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


Реагировать на объект события

Обработчики событий имеют доступ к событию React, вызвавшему функцию.

В нашем примере это событие «щелчок».

Пример:

Функция стрелки: Отправка объекта события вручную:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));

Это пригодится, когда мы рассмотрим форму в одной из последующих глав.


Проверьте себя с помощью упражнений

Упражнение:

Заполните эту инструкцию, чтобы включить обработчик события щелчка.

<button ={clicked()}>Click Me!</button>