События

Событие — это сигнал от браузера о действии пользователя: нажатии, вводе текста, отправке формы. В Solid обработчик события передаётся атрибутом с приставкой on, как в React, но получает настоящий объект события браузера.

Обработчик нажатия

// src/components/AddButton.jsx
export default function AddButton() {
  const handleClick = () => {
    console.log('Добавить задачу');
  };
 
  return <button onClick={handleClick}>Добавить</button>;
}

После каждого нажатия в консоли браузера появляется «Добавить задачу». Передаётся сама функция handleClick, без скобок: со скобками она выполнилась бы один раз при создании компонента.

Объект события

Обработчик получает объект события. Для поля ввода текст лежит в e.currentTarget.value:

// src/components/NewTodo.jsx
import { createSignal } from 'solid-js';
 
export default function NewTodo() {
  const [text, setText] = createSignal('');
 
  return (
    <div>
      <input onInput={(e) => setText(e.currentTarget.value)} />
      <p>Вы вводите: {text()}</p>
    </div>
  );
}

Абзац под полем обновляется на каждый введённый символ. В Solid onChange работает как в обычном HTML — срабатывает только при потере фокуса, поэтому для ввода по буквам нужен onInput.

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

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

// src/components/Priority.jsx
import { createSignal } from 'solid-js';
 
export default function Priority() {
  const [level, setLevel] = createSignal('обычный');
 
  return (
    <div>
      <p>Приоритет: {level()}</p>
      <button onClick={() => setLevel('высокий')}>Высокий</button>
      <button onClick={[setLevel, 'низкий']}>Низкий</button>
    </div>
  );
}

Форма [функция, данные] вызывает функцию с данными первым аргументом и событием вторым. Обе кнопки меняют текст абзаца.

Делегирование и on:

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

Частая ошибка

Вызвать функцию вместо передачи:

// src/components/AddButton.jsx
export default function AddButton(props) {
  // Неправильно: onClick={props.onAdd()} — вызов сразу при создании
  return <button onClick={() => props.onAdd()}>Добавить</button>;
}

onClick={props.onAdd()} выполнит функцию один раз при создании кнопки и передаст в onClick её результат. Передавайте функцию или оборачивайте вызов в стрелку.