Чтобы очистить поля ввода в React после отправки формы, вы можете использовать любой из следующих методов:
-
Управляемые компоненты. В этом подходе вы сохраняете значения полей ввода в состоянии компонента и обновляете состояние при отправке формы. После отправки формы вы можете сбросить состояние, чтобы очистить поля ввода.
-
Ссылки: вы можете создать ссылку для каждого поля ввода и использовать ее для доступа и очистки значения поля после отправки формы.
-
Сброс формы. Оберните поля ввода в элемент
Вот пример, демонстрирующий подход с использованием контролируемых компонентов:
import React, { useState } from "react";
function MyForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
// Add more fields as needed
});
const handleChange = (e) => {
setFormData((prevData) => ({
...prevData,
[e.target.name]: e.target.value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
// Perform form submission logic here
// Clear the input fields
setFormData({
name: "",
email: "",
// Reset other fields as needed
});
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
{/* Add more input fields here */}
<button type="submit">Submit</button>
</form>
);
}