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

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

Для добавления обработчика события вы сначала определите функцию, а затем передадите её в качестве свойства соответствующему тегу JSX. Например, вот кнопка, которая пока ничего не делает:

export default function Button() {
  return (
    <button>
      I don't do anything
    </button>
  );
}

Вы можете сделать так, чтобы она отображала сообщение при нажатии пользователем, выполнив следующие три шага:

1. Объявите функцию с именем handleClick внутри вашего Button компонента.
2. Реализуйте логику внутри этой функции (используйте alert для отображения сообщения).
3. Добавьте onClick={handleClick} к <button> JSX.

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Вы определили функцию handleClick и затем передали её в качестве свойства к <button>. handleClick является обработчиком события. Функции обработчиков событий:

• Обычно определяются внутри ваших компонентов.
• Имеют имена, начинающиеся с handle, за которым следует название события.

По соглашению, обработчики событий часто именуются handle с последующим названием события. Вы часто будете видеть onClick={handleClick}, onMouseEnter={handleMouseEnter}, и так далее.

В качестве альтернативы, вы можете определить обработчик события внутри JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Или, более кратко, с помощью стрелочной функции:

<button onClick={() => {
  alert('You clicked me!');
}}>

Все эти стили эквивалентны. Встроенные обработчики событий удобны для коротких функций.

// This alert fires when the component renders, not when clicked!
<button onClick={alert('You clicked me!')}>

<button onClick={() => alert('You clicked me!')}>

Чтение свойств в обработчиках событий

Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к свойствам компонента. Вот кнопка, которая при нажатии отображает всплывающее окно с её свойством message.

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

Это позволяет этим двум кнопкам отображать разные сообщения. Попробуйте изменить сообщения, переданные им.

Передача обработчиков событий в качестве свойств

Часто вы хотите, чтобы родительский компонент определял обработчик события дочернего компонента. Рассмотрим кнопки: в зависимости от того, где вы используете компонент Button, вы можете захотеть выполнить другую функцию — может быть, одну, которая воспроизводит фильм, а другую, которая загружает изображение.

Для этого передайте свойство, которое компонент получает от родителя, в качестве обработчика события, как показано ниже:

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

Здесь, компонент Toolbar рендерит PlayButton и UploadButton.

• PlayButton передаёт handlePlayClick как свойство onClick в Button внутри.
• UploadButton передаёт () => alert('Uploading!') как свойство onClick в Button внутри.

Наконец, ваш компонент Button принимает свойство, называемое onClick. Он передаёт это свойство непосредственно встроенному браузерному <button> с onClick={onClick}. Это сообщает React вызвать переданную функцию при нажатии.

Если вы используете систему дизайна, обычно компоненты, такие как кнопки, содержат стили, но не определяют поведение. Вместо этого такие компоненты, как PlayButton и UploadButton, будут передавать обработчики событий вниз.

Именование свойств обработчиков событий

Встроенные компоненты, такие как <button> и <div>, поддерживают только названия событий браузера, такие как onClick. Однако, когда вы создаёте свои собственные компоненты, вы можете называть их свойства обработчиков событий любым способом.

По соглашению, свойства обработчиков событий должны начинаться с on, за которым следует заглавная буква.

Например, свойство Button компонента onClick могло бы называться onSmash:

function Button({ onSmash, children }) {
  return (
    <button onClick={onSmash}>
      {children}
    </button>
  );
}

export default function App() {
  return (
    <div>
      <Button onSmash={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onSmash={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

В этом примере, <button onClick={onSmash}> показывает, что браузерному <button> (строчные буквы) всё ещё необходимо свойство, называемое onClick, но имя свойства, получаемого вашим настраиваемым компонентом Button, зависит от вас!

Когда ваш компонент поддерживает несколько взаимодействий, вы можете давать именам свойств обработчиков событий названия, соответствующие концепциям приложения. Например, этот компонент Toolbar получает обработчики событий onPlayMovie и onUploadImage:

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div>
      <Button onClick={onPlayMovie}>
        Play Movie
      </Button>
      <Button onClick={onUploadImage}>
        Upload Image
      </Button>
    </div>
  );
}

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

Заметьте, как компонент App не должен знать, что Toolbar будет делать с onPlayMovie или onUploadImage. Это деталь реализации компонента Toolbar. Здесь, Toolbar передаёт их как обработчики onClick своим Button, но позже он также может инициировать их при нажатии клавиши. Использование имён свойств, соответствующих взаимодействиям приложения, таких как onPlayMovie, даёт вам гибкость в изменении их использования позже.

Распространение событий

Обработчики событий также будут улавливать события от любых дочерних элементов, которые может иметь ваш компонент. Мы говорим, что событие «всплывает» или «распространяется» вверх по дереву: оно начинается с места, где произошло событие, а затем поднимается по дереву.

Этот <div> содержит две кнопки. У <div> и каждой кнопки есть свои обработчики onClick. Какие обработчики, по вашему мнению, сработают при нажатии кнопки?

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <button onClick={() => alert('Playing!')}>
        Play Movie
      </button>
      <button onClick={() => alert('Uploading!')}>
        Upload Image
      </button>
    </div>
  );
}

Если вы нажмёте любую кнопку, её обработчик onClick будет запущен первым, за которым последует обработчик родительского <div>’s onClick. Таким образом, появятся два сообщения. Если вы нажмёте на сам инструмент, запустится только обработчик родительского <div>’s onClick.

Остановка распространения

Обработчики событий получают объект события в качестве единственного аргумента. По соглашению, он обычно называется e, что означает «событие». Вы можете использовать этот объект для чтения информации о событии.

Этот объект события также позволяет остановить распространение. Если вы хотите предотвратить достижение события родительскими компонентами, вам нужно вызвать e.stopPropagation() так, как это делает компонент Button:

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

Когда вы нажимаете на кнопку:

1. React вызывает обработчик onClick переданный в <button>.
2. Этот обработчик, определённый в Button, выполняет следующее:
   • Вызывает e.stopPropagation(), предотвращая дальнейшее распространение события.
   • Вызывает функцию onClick , которая является свойством, переданным из компонента Toolbar.
3. Эта функция, определённая в компоненте Toolbar, отображает собственное всплывающее окно кнопки.
4. Поскольку распространение было остановлено, обработчик родительского <div>’s onClick не выполняется.

В результате e.stopPropagation(), нажатие на кнопки теперь отображает только одно всплывающее окно (из <button>) вместо двух (из <button> и родительского инструмента <div>). Нажатие кнопки отличается от нажатия на окружающий инструмент, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.

<div onClickCapture={() => { /* this runs first */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

Передача обработчиков как альтернатива распространению

Обратите внимание, как этот обработчик клика выполняет строку кода и затем вызывает свойство onClick переданное родителем:

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

Вы можете добавить больше кода в этот обработчик перед вызовом родительского обработчика события onClick тоже. Эта схема предоставляет альтернативу распространению. Она позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указать некоторое дополнительное поведение. В отличие от распространения, это не происходит автоматически. Но преимущество этой схемы заключается в том, что вы можете четко отследить всю цепочку кода, который выполняется в результате какого-либо события.

Если вы полагаетесь на распространение, и трудно отследить, какие обработчики выполняются и почему, попробуйте вместо этого этот подход.

Предотвращение стандартного поведения

Некоторые события браузера имеют связанное с ними стандартное поведение. Например, событие <form> submit, которое происходит при нажатии кнопки внутри него, по умолчанию перезагрузит всю страницу:

export default function Signup() {
  return (
    <form onSubmit={() => alert('Submitting!')}>
      <input />
      <button>Send</button>
    </form>
  );
}

Вы можете вызвать e.preventDefault() на объекте события, чтобы остановить это:

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

Не путайте e.stopPropagation() и e.preventDefault(). Они оба полезны, но не связаны:

• e.stopPropagation() останавливает срабатывание обработчиков событий, прикрепленных к тегам выше.
• e.preventDefault() предотвращает стандартное поведение браузера для нескольких событий, которые его имеют.

Могут ли обработчики событий иметь побочные эффекты?

Конечно! Обработчики событий — лучшее место для побочных эффектов.

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

export default function LightSwitch() {
  function handleClick() {
    let bodyStyle = document.body.style;
    if (bodyStyle.backgroundColor === 'black') {
      bodyStyle.backgroundColor = 'white';
    } else {
      bodyStyle.backgroundColor = 'black';
    }
  }

  return (
    <button onClick={handleClick()}>
      Toggle the lights
    </button>
  );
}