---
tags: 2022 React 新手讀書會
---
# 🏅 Day 18 ｜React Hook Form - Submit Form
驗證完表單後，接下來要練習的就是將表單送出，在前幾天的練習範例中，其實已經有加上了送出的事件，今天就來講解一下送出流程與運用吧！
這邊用『新增一篇文章』來當作範例題目，[範例連結](https://codepen.io/hexschool/pen/oNqMpaN)。

onSubmit 是 form 預設的送出事件，當點下 type="submit" 的 input，就會觸發表單送出行為，而送出是綁定了 React Hook Form 中的 handleSubmit 方法，此方法中可以加入事件（onSubmitEvent）。

<form onSubmit={handleSubmit(onSubmitEvent)}>
    ... 省略 input
    <input type="submit" disabled={Object.keys(errors).length > 0} />
</form>

這邊也可以特別注意一下，因為我們可以從 errors 取得驗證有錯誤的項目，所以可以透過 `Object.keys(errors).length > 0` 讓提交按鈕在有錯誤時被 disabled。

若是沒有錯誤點選提交後，React Hook Form 會將 input 資料組合為物件和值，我們可以看到 data 會是 `{title: "文章標題寫在這", body: "這是一篇文章的內容"}`。接著即可運用 onSubmitEvent 將資料 post 出去：

const onSubmitEvent = (data) => {
    axios.post('https://jsonplaceholder.typicode.com/posts', data).then(res => {
      alert(`回傳結果：${JSON.stringify(res.data)}`);
    })
}

這邊是使用 axios 來處理 request，若同學自己練習時，也要注意：
1. 先載入 axios 的 CDN 到 CodePen。
2. axios post 資料的寫法是： `axios.post(API_URL, 資料)`

[handlesubmit 文件](https://react-hook-form.com/api/useform/handlesubmit)
[axios post 文件](https://axios-http.com/docs/post_example)
[使用 JSONPlaceholder 提供的練習 API](https://jsonplaceholder.typicode.com/guide/)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/QWmBmJN)，並試著完成註冊使用者帳號功能。

- 畫面需包含 email, nickname, password 三個欄位
- 皆需驗證為必填。
- email 需符合 mail 格式。
- password 需驗證大於 6 碼。
- 有驗證錯誤時，註冊按鈕會是 disabled。
- 填寫完點選『註冊』可以送出註冊資料，並收到註冊成功訊息。

#### API 資訊
- 註冊 API URL 為：[POST] `https://todoo.5xcamp.us/users`
- [API 文件](https://todoo.5xcamp.us/api-docs/index.html)


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

https://codepen.io/hexschool/pen/abYjZEE

-->

回報區
---

| Discord | CodePen / 答案 |
|:-------------:|:-----------------------------------------------------------------:|
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/wvmEvgO?editors=1111) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/yLKrMmm?editors=1010) |
| Vita Ora#4585 | [CodePen](https://codepen.io/showlovezz/pen/qBowrva?editors=0011) |
| Kenge#3690 | [CodePen](https://codepen.io/pgkusn/pen/mdxgmrK) |
| Mitour#0672 | [CodePen](https://codepen.io/mitour/pen/RwMOZMV) |
|Stanley#2505|[CodePen](https://codepen.io/bigbearada/pen/WNzWgrX)|
|Ryder#7398|[CodePen](https://codepen.io/rider159159/pen/eYMoLQw)|
|larahuang#8309|[CodePen](https://codepen.io/lara1105huang/pen/gOeyBOe)|
|Rocker#6235|[CodePen](https://codepen.io/RockerLi/pen/XWEQypV)|
|Anson#3594|[CodePen](https://codepen.io/huanmingchang/pen/KKoYLOV?editors=0011)|
|Timothy#5683|[CodePen](https://codepen.io/timothy_hippo/pen/VwXNbwz)|
|彼得#1923|[CodePen](https://codepen.io/shiou-ho/pen/xxWevxB)|
|Kimi#2092|[CodePen](https://codepen.io/a3216lucy/pen/LYdvwbY)|
|thereason#9630|[CodePen](https://codepen.io/esw4soft/pen/BarEXGY)|
|charlottelee849#0366|[CodePen](https://codepen.io/charlotte-lee/pen/mdxYJdq?editors=0010)|
|Neal#0665|[CodePen](https://codepen.io/neallkf/pen/wvmZjGq?editors=0011)|
|Yanyan#3555|[CodePen](https://codepen.io/wei-yi-lee/pen/OJvGgBR?editors=1010)|
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/PoRrZMK)|
| yoshidc#0455 |[Codepen](https://codepen.io/yoshiyyc/pen/wvmbExr)|
|ねこ*#9385|[Codepen](https://codepen.io/kunpao0104/pen/NWYZPmy)|
|Robert Lo#9653|[Codepen](https://codepen.io/Robert-Lo/pen/abYgYqV?editors=1011)|
|RON#2813|[Codepen](https://codepen.io/Ron115/pen/qBozpeE)|
|Carolkiki2003#7399|[Codepen](https://codepen.io/wasfzuig/pen/oNqrJav)|
|翔#0859|[Codepen](https://codepen.io/energy95272z/pen/RwMzmvx?editors=1010)|
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/OJveKqp?editors=1111)|
|aka 南崗偉傑率|[codepan](https://codepen.io/wei-nie/pen/OJvKgjd?editors=1111)|
|栗栗 #5900|[Codepen](https://codepen.io/daylilystudio/pen/dymxBmJ)|
|JasonLU|[Codepen](https://codepen.io/wnptocip/pen/oNdvbBa)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/gOzYoGV?editors=1111)|
|TedWang|[Codepen](https://codepen.io/wangtaiyan/pen/GRdKwQd?editors=0010)|
|ZengZeng|[Codepen](https://codepen.io/tyzyoko/pen/dymBrmK)|
|wenyun#2362|[Codepen](https://codepen.io/wenyuncc/pen/dyeoWma?editors=0011)|
|eching#9183|[Codepen](https://codepen.io/echin/pen/vYRwzgO)|