SolidJS. Быстрый старт

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

Что такое SolidJS?

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

Установка SolidJS

Чтобы начать работу с SolidJS, вы можете включить библиотеку в свой проект с помощью менеджера пакетов, такого как npm или yarn. Откройте терминал и выполните следующую команду:

npm install solid-js

После завершения установки вы можете импортировать SolidJS в свой проект:

import { createSignal } from "solid-js";

Пример Hello World

Давайте начнем с создания простого примера «Hello World» с использованием SolidJS. В этом примере мы отобразим приветственное сообщение на экране.

import { createSignal, render } from "solid-js";

function App() {
  const [message, setMessage] = createSignal("Hello, World!");
  return (
    <div>
      <h1>{message()}</h1>
      <button onClick={() => setMessage("Hello, SolidJS!")}>
        Update Message
      </button>
    </div>
  );
}

render(() => <App />, document.getElementById("app"));

В приведенном выше коде мы определяем функциональный компонент под названием App. Внутри компонента мы используем функцию createSignal для создания реактивного сигнала, называемого message. Сигнал message содержит приветственное сообщение, и мы инициализируем его значением Hello, World!. В коде JSX мы можем получить доступ к значению сигнала message с помощью message(). Это позволяет пользовательскому интерфейсу реагировать на изменения сигнала и динамически обновляться. Обработчик событий onClick кнопки обновляет значение сигнала message на Hello, SolidJS! при нажатии. Это изменение запускает повторную визуализацию компонента, и обновленное сообщение отображается на экране. Наконец, мы используем функцию render для рендеринга компонента App и монтируем его к элементу DOM с идентификатором app.

Компоненты и JSX в SolidJS

В SolidJS компоненты пользовательского интерфейса определяются как функции, возвращающие элементы JSX. JSX — это расширение синтаксиса для JavaScript, которое позволяет писать HTML-подобный код в коде JavaScript. Он обеспечивает краткий и выразительный способ описания структуры и содержимого пользовательского интерфейса. Ниже приведен пример простого компонента, который визуализирует кнопку:

import { createSignal } from "solid-js";
function Button(props) {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>
      {props.label} ({count()})
    </button>
  );
}

Сигналы и реактивное программирование

Сигналы лежат в основе модели реактивного программирования SolidJS. Они представляют собой реактивные значения, которые можно считывать и обновлять. Сигналы создаются с помощью функции createSignal, которая возвращает пару значений: текущее значение сигнала и функцию для обновления значения.

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);

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

console.log(count()); // Output: 0

Чтобы обновить значение сигнала, вызываем функцию обновления с новым значением:

setCount(10);
console.log(count()); // Output: 10

Сигналы можно использовать в компонентах для создания динамических пользовательских интерфейсов, которые реагируют на изменения в данных. При обновлении сигнала все компоненты, зависящие от этого сигнала, автоматически перерисовываются.

Условный рендеринг

SolidJS предоставляет несколько компонентов потока управления для условного рендеринга. Компонент Show используется для условной визуализации части представления на основе условия.

import { Show } from 'solid-js';

function App() {
  // ...
  return (
    <div>
      <Show when={count() > 0}>
        <h2>Count is greater than 0</h2>
      </Show>
    </div>
  );
}

В этом примере компонент <Show> используется для условной визуализации элемента <h2> только в том случае, если переменная состояния count больше 0. Если условие выполнено, будет визуализирован элемент <h2>; в противном случае он будет скрыт.

Списки и итерации

SolidJS предоставляет компонент <For> для итерации массивов и рендеринга списка элементов. Давайте изменим наш компонент App, чтобы отобразить список элементов на основе массива данных.

import { createSignal } from 'solid-js';

function App() {
  const [items, setItems] = createSignal([
    'Apple',
    'Banana',
    'Orange'
  ]);

  const addItem = () => {
    const newItem = prompt('Enter a new item:');
    if (newItem) {
      setItems([...items(), newItem]);
    }
  };

  const removeItem = (index) => {
    const updatedItems = items().filter((_, i) => i !== index);
    setItems(updatedItems);
  };

  return (
    <div>
      <ul>
        <For each={items()}>{(item, index) => (
          <li>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        )}</For>
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}
export default App;

В этом примере мы инициализируем переменную реактивного состояния items помощью массива строк. Компонент <For> используется для перебора массива items и отрисовки элемента <li> для каждого элемента. Мы также предоставляем параметр index для функции обратного вызова для определения позиции каждого элемента в массиве. Функция addItem предлагает пользователю ввести новый элемент и добавляет его в массив items при подтверждении. Функция removeItem удаляет элемент из массива items на основе его индекса.

Рефы (Refs) ссылки в SolidJS

Ссылки позволяют получать доступ к базовым элементам DOM в компонентах SolidJS и взаимодействовать с ними. Вы можете думать о ссылках как о способе получения ссылки на определенный элемент, аналогично использованию getElementById в традиционном JavaScript. SolidJS предоставляет два способа работы с рефами: с помощью переменной напрямую или с помощью функции обратного вызова.

Ссылка на основе переменной

import { createSignal, onMount } from "solid-js";

function App() {
  let myButton;
  onMount(() => {
    console.log(myButton);
  });
  return (
    <button ref={myButton}>
      Click me
    </button>
  );
}

В приведенном выше коде мы определяем переменную myButton и передаем ее в проп ref элемента button. Мы используем функцию onMount для регистрации переменной myButton после того, как компонент смонтирован и подключен к DOM. Получив доступ к переменной myButton, мы можем выполнять действия или получать информацию об элементе button.

Ссылка на основе функции обратного вызова

import { createSignal } from "solid-js";

function App() {
  const [myButton, setMyButton] = createSignal(null);

  const handleButtonClick = () => {
    console.log(myButton());
  };

  return (
    <div>
      <button ref={setMyButton} onClick={handleButtonClick}>
        Click me
      </button>
    </div>
  );
}

В этом примере мы используем функцию обратного вызова для установки ref. Функция setMyButton вызывается со ссылкой на элемент, когда компонент визуализируется и подключается к модели DOM. Затем мы можем получить доступ к ссылке на элемент в функции handleButtonClick.

Стилизация компонента

SolidJS предоставляет различные подходы к стилизации компонентов. Вы можете использовать встроенные (inline) стили, классы CSS или библиотеки CSS-in-JS для стилизации компонентов SolidJS.

Встроенные стили (inline)

function App() {
  const [color, setColor] = createSignal("red");
  
  return (
    <div>
      <button
        style={`background-color: ${color()}`}
        onClick={() => setColor("blue")}
      >
        Change Color
      </button>
    </div>
  );
}

В приведенном выше примере используется проп style для определения встроенных стилей для элемента button. Значением свойства style является строка, содержащая пары CSS свойство-значение. Мы можем динамически обновлять стиль, передавая вычисленное значение в прпо style.

CSS классы

function App() {
  const [isActive, setIsActive] = createSignal(false);

  return (
    <div>
      <button
        classList={{ "active": isActive()} }
        onClick={() => setIsActive(!isActive())}
      >
        Toggle Active
      </button>
    </div>
  );
}

В этом примере мы условно применяем CSS-класс active к элементу button на основе значения сигнала isActive. Если isActive имеет значение true, применяется класс active; В противном случае класс не применяется.

Обработка ошибок

Обработка ошибок является важным аспектом любого приложения, и SolidJS предоставляет функции для корректной обработки ошибок. Компонент <ErrorBoundary> позволяет перехватывать и обрабатывать ошибки, возникающие в его дочерних компонентах.

import { ErrorBoundary } from 'solid-js';
function ErrorComponent() {
  throw new Error('Something went wrong!');
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <ErrorBoundary fallback={<div>Error occurred! Please try again.</div>}>
        <ErrorComponent />
      </ErrorBoundary>
    </div>
  );
}

В этом примере компонент <ErrorBoundary> является оберткой компонента <ErrorComponent>. Если в <ErrorComponent> возникает ошибка, вместо сообщения об ошибке будет отображаться резервное содержимое, предоставленное в <ErrorBoundary>.

Suspense

SolidJS предоставляет компонент Suspense и возможности асинхронного рендеринга для обработки состояний загрузки и асинхронной выборки данных. Компонент Suspense позволяет обрабатывать состояния загрузки и резервные пользовательские интерфейсы в ожидании разрешения данных. Он работает в сочетании с функцией createEffect для отслеживания состояния загрузки асинхронных операций.

import { createEffect, createSignal } from 'solid-js';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded!');
    }, 2000);
  });
}

function App() {
  const [data, setData] = createSignal('');
  const [loading, setLoading] = createSignal(true);
  createEffect(async () => {
    setLoading(true);
    const result = await fetchData();
    setData(result);
    setLoading(false);
  });

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {loading() ? (
          <div>Loading...</div>
        ) : (
          <div>{data()}</div>
        )}
      </Suspense>
    </div>
  );
}

В приведенном выше коде мы имитируем операцию выборки данных с помощью функции setTimeout. Компонент App использует функцию createEffect для обработки асинхронной выборки данных и соответствующим образом обновляет сигналы loading и data. В компоненте Suspense мы условно визуализируем состояние загрузки или завершение получения данных на основе значения сигнала loading.

Порталы

Порталы — это мощная функция SolidJS, которая позволяет отображать компоненты за пределами иерархии DOM их родителя. Это полезно, когда вам нужно отобразить компонент в другом элементе DOM, таком как модальное окно или всплывающая подсказка.

import { Portal } from 'solid-js/web';

function Modal() {
  return (
    <Portal mount={document.getElementById('modal-root')}>
      <div className="modal">Modal Content</div>
    </Portal>
  );
}

В этом примере компонент <Portal> визуализирует модальное содержимое внутри элемента DOM с modal-root идентификатора, который находится за пределами иерархии DOM родительского компонента. Это позволяет разделять задачи и отображать компоненты в разных частях HTML-документа.

Контекст

Контекст — это мощная функция в SolidJS, которая позволяет обмениваться данными в дереве компонентов без явной передачи пропсов через каждый уровень. Это полезно, когда у вас есть данные, к которым требуется доступ многим компонентам вашего приложения. Для создания контекста можно использовать функцию createContext:

import { createContext } from "solid-js";
const MyContext = createContext();

После создания контекста можно указать значение для этого контекста с помощью компонента Provider:

<MyContext.Provider value={/* значение контекста */}>
  {/* Компоненты, которым нужен доступ к контексту */}
</MyContext.Provider>

Чтобы использовать значение контекста в компоненте, можно использовать хук useContext:

import { useContext } from "solid-js";

const MyComponent = () => {
  const contextValue = useContext(MyContext);
  // Используем значение из контекста в компоненте
};

Обернув компоненты компонентом Provider, можно сделать значение контекста доступным для всех дочерних компонентов в дереве компонентов. Контекст — это мощный инструмент для управления глобальным или общим состоянием в приложении. Это помогает сократить объем prop drilling’а и упрощает передачу данных компонентам, которые в них нуждаются.

Итоги

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

Содержание туториала по React React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.

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

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

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

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

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

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!');
}}>

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

Особенности передачи обработчиков событий

Функции, передаваемые обработчикам событий, должны отправляться, а не вызываться. Например:

отправка функции (верно)	вызов функции (неверно)
<button onClick={handleClick}>	<button onClick={handleClick()}>

Разница тонкая. В первом примере функция handleClick передается как обработчик события onClick. Это говорит React запомнить ее и вызывать функцию только тогда, когда пользователь нажимает кнопку. Во втором примере () в конце handleClick() запускает функцию сразу же во время рендеринга, без каких-либо кликов. Это связано с тем, что JavaScript внутри JSX { и } выполняется сразу.

Когда вы пишете код инлайном (определение в той же строке), та же ловушка проявляется по-другому:

отправка функции (верно)	вызов функции (неверно)
<button onClick={() => alert('...')}>	<button onClick={alert('...')}>

Такой инлайн код не срабатывает при клике — он срабатывает каждый раз, когда компонент отрисовывается:

// Это оповещение срабатывает при рендеринге компонента, а не при нажатии!
<button onClick={alert('You clicked me!')}>

Если вы хотите определить инлайн (встроенный) обработчик событий, оберните его в анонимную функцию следующим образом:

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

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

• <button onClick={handleClick}> передает функцию handleClick.
• <button onClick={() => alert('...')}> передает функцию () => alert('...').

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

Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, при нажатии на которую отображается предупреждение с сообщением 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 внутренней кнопке.
• UploadButton передает () => alert('Uploading!') в качестве пропса onClick для Button, который находится внутри.

Наконец, компонент Button принимает проп onClick. Он передает этот проп непосредственно встроенной в браузер кнопке <button> с onClick={onClick}. Это говорит React вызывать переданную функцию по клику. Если вы используете дизайн-систему, такие компоненты, как кнопки, обычно содержат стили, но не определяют поведение. Вместо этого такие компоненты, как PlayButton и UploadButton, будут передавать обработчики событий вниз.

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

Встроенные компоненты, такие как <button> и <div>, поддерживают только имена событий браузера, такие как onClick. Однако, когда вы создаете свои собственные компоненты, вы можете называть пропсы их обработчиков событий как угодно. По соглашению пропсы обработчиков событий должны начинаться с on, за которым следует заглавная буква. Например, проп onClick компонента Button можно было бы назвать 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, дает вам возможность изменить способ их использования позже.

Распространение события (Event Propagation)

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

export default function () {
  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 будет запущен первым, а затем onClick родителя <div>. Таким образом, появятся два сообщения. Если вы щелкнете по самому Toolbar, запустится onClick только родительского элемента <div>. Все события в React распространяются, кроме onScroll, который работает только с тегом JSX, к которому вы его прикрепляете.

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

Обработчики событий получают объект события в качестве единственного аргумента. По соглашению его обычно называют e, что означает "event" ("событие"). Вы можете использовать этот объект для чтения информации о событии. Этот объект события также позволяет остановить распространение. Если вы хотите, чтобы событие не достигало родительских компонентов, вам нужно вызвать 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. Поскольку распространение было остановлено, обработчик onClick родительского элемента <div> не запускается.

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

Захват событий

В редких случаях вам может понадобиться перехватывать все события дочерних элементов, даже если они остановили распространение. Например, может быть, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Вы можете сделать это, добавив Capture в конце имени события:

<div
  onClickCapture={() => {
    /* запускается первым */
  }}
>
  <button onClick={(e) => e.stopPropagation()} />
  <button onClick={(e) => e.stopPropagation()} />
</div>

Каждое событие распространяется в три этапа:

1. Он перемещается вниз, вызывая все обработчики onClickCapture.
2. Он запускает обработчик onClick выбранного элемента.
3. Он перемещается вверх, вызывая все обработчики onClick.

События захвата полезны для кода, такого как маршрутизаторы или аналитика, но вы, вероятно, не будете использовать их в коде приложения.

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

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

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

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

Предотвращение поведения по умолчанию

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

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 это делается с помощью состояния - памяти компонента. Обо всем этом вы узнаете в следующей части.

Резюме

• Вы можете обрабатывать события, передавая функцию в качестве пропса элементу, такому как <button>.
• Обработчики событий должны передаваться, а не вызываться. onClick={handleClick}, а не onClick={handleClick()}.
• Вы можете определить функцию обработчика событий отдельно или встроенную (инлайн).
• Обработчики событий определяются внутри компонента, поэтому они могут получить доступ к пропсам.
• Вы можете объявить обработчик событий в родительском элементе и передать его в качестве пропса дочернему элементу.
• Вы можете определить свои собственные пропсы обработчика событий с именами, специфичными для приложения.
• События распространяются вверх. Вызовите e.stopPropagation() для первого аргумента, чтобы это предотвратить.
• События могут иметь нежелательное поведение браузера по умолчанию. Вызовите e.preventDefault(), чтобы это предотвратить.
• Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению события.