PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Как на React очистить поля после отправки формы?

Основы React

Очистка полей зависит от того, где хранится значение: в state (управляемая форма) или в DOM (неуправляемая).

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

const [form, setForm] = useState(initialValues);

const handleSubmit = async (e) => {
  e.preventDefault();
  await api.send(form);
  setForm(initialValues);   // очистка = вернуть начальное состояние
};

initialValues держать константой вне компонента (или в useRef), чтобы не мутировать. Сброс значений не сбрасывает ошибки валидации, touched и состояние вложенных компонентов, их очищают отдельно.

Неуправляемая форма

const formRef = useRef(null);

const handleSubmit = (e) => {
  e.preventDefault();
  send(new FormData(e.currentTarget));
  e.currentTarget.reset();   // нативный reset вернёт defaultValue
};

form.reset() возвращает поля к defaultValue, а не к «свежим» данным из props.

Универсальный приём: смена key

const [formKey, setFormKey] = useState(0);

<OrderForm key={formKey} />
// после успешной отправки:
setFormKey((k) => k + 1);   // компонент пересоздаётся: чистый state, ошибки, touched

Самый надёжный способ «очистить всё», включая состояние дочерних компонентов.

С библиотекой форм

React Hook Form: reset() (или reset(defaultValues)) — сбрасывает значения и мета-состояние (isDirty, errors, touched) разом; часто вызывают в onSuccess мутации. Formik — resetForm().

Нюанс

Не сбрасывать в undefined (setValue(undefined)) — управляемое поле станет неуправляемым и React выдаст предупреждение; использовать пустую строку.

Коротко для собеседования

Управляемая форма — setForm(initialValues) (помня про errors/touched); неуправляемая — form.reset() или FormData + reset; надёжно и полностью — смена key (пересоздание формы); с React Hook Form — reset() в onSuccess. Очищать в '', а не в undefined.

Другие вопросы раздела