# React - Select Component

## 先談談 options 的長相

一般 options 會長的像這樣：

{   
    label: 'Taiwan001',
    value: '台灣'
}

至於為什麼會長這樣呢？

> 因為我們可能會遇到顯示的 label 跟選取所需要的 value 不一樣的狀況

可能的情境：

* 翻譯檔
* 使用者跟資料庫需要的資料不一樣，使用者需要看到的是商品品名，然而資料庫可能需要的編號或是代號

## 分享捷安特的 select 表單：

select component 一般來說會長這樣～


可能有的功能有：

1. 點擊後觸發下拉式選單出現。
2. 把選取的資料打進去 redux 內儲存。
3. 不選前者，後者不能被觸發 (有連動功能)。

### 過程中發生了什麼？

首先我們先看看 useBoolean 在做什麼：

* 目前開啟的狀態是什麼 isOpen
* 開關功能 togglePanel
* 關閉 closePanel
* 開啟 openPanel
* 保持開啟 keepOpen

const [isOpen, { toggle: togglePanel, setFalse: closePanel, setTrue: openPanel }] = useBoolean({
		defaultBoolean: keepOpen,
	});

1. 點擊 input 後，會 togglePanel 也就是會開關下拉式選單(位置在 dropdown 內)

2. 接著週邊的 css 開始連動 （selectInput 35行）

* 使箭頭 icon 產生動畫
* 給 input 加上 highlight 底線

3. 把 data 使用 options 的方式印出

我們可以看到，當點擊 dropdown panel 時：(FormdropSelect 258 行)

* 會觸發 onChangeValue funtion ，這部分其實就是把資料打進去 redux
* 以及關閉 panel


最外層傳進去 onChange function

到這邊基本上就完成 select 的工作摟！

### 最後談談這邊遇到的需要連動 select 如何處理？

其實是利用 readOnly 這個屬性來做操作

由下圖可以看到，packingForm.packingConutry.value.value 如果為 false 就會不能選！
所以其實我們做的事情就是去讀取 Redux 內的資料上一筆的 seletInput 有沒有存進去，沒有的話後者就會是 readOnly 光是這樣就達成摟！


至於 readOnly 其實就是決定要不要打開 input 而已，但不打開就代表不能輸入，功能也就完成摟！