Формы и поля ввода

Форма собирает данные от пользователя: текст задачи, приоритет, отметку «срочно». В Solid значение поля обычно хранят в сигнале: атрибут value показывает сигнал, а обработчик onInput записывает в него то, что ввёл пользователь. Такое поле называют управляемым.

Управляемое поле

// src/components/TodoForm.jsx
import { createSignal } from 'solid-js';
 
export default function TodoForm() {
  const [title, setTitle] = createSignal('');
 
  return (
    <div>
      <input value={title()} onInput={(e) => setTitle(e.currentTarget.value)} />
      <p>Символов: {title().length}</p>
    </div>
  );
}

Выведите <TodoForm /> в src/App.jsx. Число под полем меняется на каждый введённый символ. Если вызвать setTitle(''), поле очистится.

Отправка формы

Форма отправляется кнопкой с type="submit" или клавишей Enter. Обработчик onSubmit должен отменить стандартную перезагрузку страницы:

// src/components/TodoForm.jsx
import { createSignal } from 'solid-js';
 
export default function TodoForm(props) {
  const [title, setTitle] = createSignal('');
 
  const submit = (e) => {
    e.preventDefault();
    props.onAdd(title());
    setTitle('');
  };
 
  return (
    <form onSubmit={submit}>
      <input value={title()} onInput={(e) => setTitle(e.currentTarget.value)} />
      <button type="submit">Добавить</button>
    </form>
  );
}

Подключите форму к хранилищу из урока о хранилищах: <TodoForm onAdd={add} />. После Enter задача появляется в списке, а поле очищается.

Флажок и список выбора

Поле	Атрибут значения	Как прочитать
Текст, `textarea`	`value`	`e.currentTarget.value`
Флажок	`checked`	`e.currentTarget.checked`
`select`	`value`	`e.currentTarget.value`

// src/components/TodoOptions.jsx
import { createSignal } from 'solid-js';
 
export default function TodoOptions() {
  const [urgent, setUrgent] = createSignal(false);
  const [priority, setPriority] = createSignal('normal');
 
  return (
    <div>
      <label>
        <input type="checkbox" checked={urgent()} onChange={(e) => setUrgent(e.currentTarget.checked)} />
        Срочно
      </label>
      <select value={priority()} onChange={(e) => setPriority(e.currentTarget.value)}>
        <option value="low">Низкий</option>
        <option value="normal">Обычный</option>
        <option value="high">Высокий</option>
      </select>
      <p>{urgent() ? 'Срочная' : 'Обычная'}, приоритет: {priority()}</p>
    </div>
  );
}

Абзац внизу сразу показывает выбранные значения. Для флажка и select подходит onChange: он срабатывает сразу после выбора.

Проверка ввода

Ошибку проверки удобно описать производной функцией и показать через Show:

// src/components/TodoForm.jsx
const error = () => (title().trim().length < 3 ? 'Минимум 3 символа' : '');
 
<Show when={error()}>
  <p class="error">{error()}</p>
</Show>
<button type="submit" disabled={!!error()}>Добавить</button>

Пока в поле меньше трёх символов, под ним видна подсказка, а кнопка недоступна.

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

Забыть e.preventDefault() в обработчике onSubmit. Браузер отправит форму обычным способом и перезагрузит страницу — все данные в сигналах пропадут, и задача так и не появится в списке.

Спасибо, что читаете!