Handling forms in React is typically done by storing the values of the form fields in state. For example:\
The browser has a built-in API called FormData that makes it easy to get the data from a form. Even if you're using React, FormData simplifies the process of obtaining the data, without needing to manage the state of each input.
FormData is also a Request body type for the Fetch API. If you're using an edge function to handle form submissions, you can use FormData to quickly obtain the data from the request.
import * as React from 'react'
function ExampleForm() {
const [firstName, setFirstName] = React.useState('')
const [lastName, setLastName] = React.useState('')
function handleSubmit(e) {
e.preventDefault()
// Do something with the data
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
type="text"
name="lastName"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
)
}
import * as React from 'react'
function ExampleForm() {
function handleSubmit(e) {
e.preventDefault()
const formData = new FormData(e.target)
const firstName = formData.get('firstName')
const lastName = formData.get('lastName')
// Do something with the data
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="firstName" />
<input type="text" name="lastName" />
<button type="submit">Submit</button>
</form>
)
}
function handleRequest(request) {
const formData = await request.formData()
const firstName = formData.get('firstName')
const lastName = formData.get('lastName')
// Do something with the data
}