🙆♀️
Next.jsでformをsubmitしてPOSTリクエストを送る
前回は固定の1パラメータを送付していましたが今回はユーザーの入力によって可変のパラメータを送付するケースを考えてみます。
Next.jsの公式を参考にしました
ボタン押下してsubmitした際にオブジェクトを取得してJSONの形に加工してPOSTリクエストを送るようにしています。送信後のレスポンスも取得できるので、結果を画面に表示するなど柔軟に利用できます。
form.tsx
# formのsubmitをハンドルしてリクエストを送る
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault()
const formData = new FormData(event.currentTarget)
const response = await fetch('/api/user/' + id, {
method: 'POST',
headers: 'Content-Type': 'application/json',
body: JSON.stringify(Object.fromEntries(formData)),
})
const data = await response.json()
console.log(data)
}
# form
<form onSubmit={onSubmit}>
<input type="radio" name="item" value="1" />
<input type="radio" name="item" value="2" />
<input type="radio" name="item" value="3" />
<button type="submit">Submit</button>
</form>
Discussion