Как на 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.