Заметки про React: “React и FormData Для сбора данных формы можно использовать FormData –…”

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: 'name@someemail.com' }
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) // name@someemail.com
  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