Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
React и FormData
Для сбора данных формы можно использовать FormData – объект, который предоставляет геттеры и сеттеры для значений формы. Его можно использовать во время сабмита формы:
function onSubmit(event: React.FormEvent) {
event.preventDefault()
const formData = new FormData(event.target)
const formValues = {
name: formData.get('name')
email: formData.get('email)
}
}
Чтобы избавиться от геттеров, можно использовать Object.fromEntries для представления данных в виде объекта:
const formValues = Object.fromEntries(formData)
console.log(formValues) { name: 'my name', email: '[email protected]' }
typeof formValues // { [k: string]: FormDataEntryValue }
Если вы работаете с TypeScript, то при использовании FormData могут возникнуть проблемы с типизацией. Эти проблемы можно решить с помощью схемы Zod и парсинга данных:
const formValues = Object.fromEntries(formData) // ❌ TYPE: { [k: string]: FormDataEntryValue }
const results = myFormSchema.safeParse(formValues)
if (results.success) {
results.data // ✅ TYPE: { email: string, quantity: number }
console.log(results.data.email) // [email protected]
console.log(results.data.quantity) // 5
} else {
// Обработка ошибки
}
React 19 способствует использованию FormData и позволяет получать данные формы при сабмите через проп action:
function MyForm() {
function formAction(formData: FormData) {
// Получаем экземпляр formData вместо event
}
return <form action={formAction}>...</form>
}
https://reacttraining.com/blog/react-and-form-data
38 · 3.4K ·