React-[表單篇]-表單開發

真的覺得慚愧，之前沒有好好搞清楚『表單』概念，所以當React實戰影音有拉出這ㄧ章節，下定決心至少連表單的樣式有什麼也要重新複習

複習表單基本樣式
筆記起手式：玩轉一下表單樣式
問題思考：
- 什麼時候需要表單？
- 自答：只要我使用網路，幾乎每一個moment都會使用到～像是打開google網頁時，會有“搜尋框”，登入email會需要輸入帳密，買賣東西會需要填寫個人付款內容等等～～～
- 我也許可以這樣說『表單』是在我們使用瀏覽器時，最頻繁與網頁互動的行為

是不是很值得好好沈浸式的學習一番？！

什麼是表單?

React與常見表單元素

React 與 input:checkbox

首先，最重要的，平常身為使用者，我們還是要好好『閱讀』表單的內容，免得誤入陷阱～～～XD
以下面程式碼為例，先來看以下input:checkbox 作為單獨使用的情況
1.加入onChange事件在input:checkbox中 -> 觸發表單行為
```
  * 加入even參數，這裡以 e 為代表    
```
2.觀察：畫面上的input:checkbox尚未打勾的狀態
3.並以console.dir展開e.target的物件詳情 checked值對應的是false
圖示範例 checked：false 狀態
當我們在畫面上勾選input:checkbox後，
4.就會回傳e.target.checked = true的狀態
圖示範例 checked：true 狀態

5.因此我們就可以利用checked狀態作為判斷依據，來判斷該input:checkbox是否有被勾選(想到“狀態”->就聯想到要用useState hook)
- 以上就是單一勾選的方式

以下面程式碼為例，先來看以下input:checkbox 作為多元選項皆可勾選的情況
- 這情況有沒有很眼熟？就是同一個問題之下的多元回答（可以是一個陣列資料）
  - 勾選該選項，就會將該值丟到陣列中
  - 未勾選，就會將該值從陣列中踢除
- 加入onChange事件在input:checkbox中->來觸發函式
  - 獨立設計handleCheckList函式作為事件調用的函式
  - 加入event參數console.log(e.target.value)
  - 勾選選項，值就會輸入
- 在App中設定checkList狀態 -> useState([])
```
//＃複選input:checkbox的狀態：初始值是[]
const [checkList, setCheckList] = useState([]);
```
- 並定義handleCheckList函式內容
```
//#處理複選
const handleCheckList = (e) => {
setCheckList([...checkList, e.target.value]);
};
```
- 但這函式這樣寫會讓我們每勾選/未勾選選項，都會被增加到checkList 如下方顯示的一樣

問題思考：

我要怎樣才能將『取消勾選/未勾選』選項，移除陣列呢？

在函式中加一個判斷 -> 透過上一個練習可以再利用input:checkbox e.target.checked做是否有被勾選的判斷依據

const handleCheckList = (e) => {
//如果checked是true -> 有被勾選 ->放入陣列
e.target.checked ? setCheckList([...checkList, e.target.value])
//checked是false -> 取消勾選 .filter要做的事 是在當前checkList資料中 找出當前e.target.value 並踢出（因此item 只要不是當前勾選為“未勾選/取消勾選”的目標值，都會被留下來）
: setCheckList(checkList.filter(item => item !== e.target.value))
};

練習程式碼

補充： input:radio 表單和 input:checkbox表單不同在於
- input:radio -> 多元選項裡，選出一項
- input:checkbox ->
  - 像上面例子，只有一個打勾選項
  - 也有多元選項裡的多元選擇

React 與表單送出

表單送出-程式碼練習

小提醒：當我們在使用form表單時，送出的button按鈕上的type設定，會影響整個表單送出的狀態：

  * button:button 當type="button" 只是按鈕樣式設定，不會觸發送出表單的行為
  * button:submit 當type="submit" HTML會有表單預設送出的行為，因此在設定onClick事件時，一定要將下面這行停止網頁預設行為寫入：

event.preventDefault()

進入表單送出的正題：
表單中有時候會有許多的資料/input輸入框等等需要使用者填寫，這樣如果以單一個input資料為單位，就代表另外要設定很多useState來寫入每一個對應的input相關資料，程式碼會越來越大坨
因此，我們會直接以form表單為一個單位，直接定義表單的內容狀態:並以物件為初始值（該物件中的key可以對應不同的input中的name值

因此，資料狀態都統一起來管理了，因此每一個input的onChange事件的函式也可以統一起來管理，接著我們把這個函式一一套用在每個input上，以onChange來觸發，輸入內容來看看回傳結果

我們就透過這個方式，利用setFormData()來寫入使用者在表單上寫入的值