Формы и управляемые поля

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

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

Создайте src/components/AddTodoForm.jsx:

// src/components/AddTodoForm.jsx
import { useState } from 'react';
 
export default function AddTodoForm() {
  const [text, setText] = useState('');
 
  return (
    <>
      <input value={text} onChange={(event) => setText(event.target.value)} />
      <p>Вы ввели: {text}</p>
    </>
  );
}

Выведите <AddTodoForm /> в App. Текст под полем меняется вместе с вводом: value берётся из состояния, а onChange его обновляет.

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

Событие onSubmit вешают на форму, а не на кнопку — тогда сработает и клавиша Enter. Метод preventDefault() отменяет стандартную перезагрузку страницы:

// src/components/AddTodoForm.jsx
import { useState } from 'react';
 
export default function AddTodoForm({ onAdd }) {
  const [text, setText] = useState('');
 
  function handleSubmit(event) {
    event.preventDefault();
    onAdd(text);
    setText('');
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(event) => setText(event.target.value)} />
      <button type="submit">Добавить</button>
    </form>
  );
}

Форма передаёт текст родителю через onAdd и очищает поле.

Подключение к списку

В src/App.jsx задача создаётся из текста формы:

// src/App.jsx
function handleAdd(text) {
  setTodos([...todos, { id: crypto.randomUUID(), text, done: false }]);
}
 
// в разметке:
<AddTodoForm onAdd={handleAdd} />
<TodoList todos={todos} onToggle={handleToggle} onDelete={handleDelete} />

Введите «Полить цветы» и нажмите Enter — задача появится в конце списка, а поле опустеет.

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

Ошибку вычисляют из состояния, отдельное состояние для неё не нужно:

// src/components/AddTodoForm.jsx
const trimmed = text.trim();
 
// в разметке:
<button type="submit" disabled={trimmed === ''}>Добавить</button>
{text.length > 100 && <p>Не больше 100 символов</p>}

Пока поле пустое или в нём одни пробелы, кнопка неактивна.

Другие типы полей

Поле	Атрибут значения	Что брать в onChange
`input`, `textarea`	`value`	`event.target.value`
`select`	`value`	`event.target.value`
`input type="checkbox"`	`checked`	`event.target.checked`

У textarea и select в React тоже есть атрибут value — не нужно писать текст внутрь тега или selected у варианта.

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

Поле с value, но без onChange становится доступным только для чтения — в него нельзя ничего ввести, а в консоли появится предупреждение:

// Неправильно: текст в поле не меняется.
<input value={text} />
 
// Правильно:
<input value={text} onChange={(event) => setText(event.target.value)} />

Если поле не нужно контролировать, используйте defaultValue вместо value.

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