終於到了第8天，修修改改的...
每天都想再多說一點，
但有家庭的社畜能擠出的多餘時間真的不多，
最近看到蝦蝦系列故事，只能說有點感慨，
但說真的誰沒遇過超誇張新人，
例如...
喊著身體不舒服請假，結果後面看到她在阿里山上打卡的啦
計算公式都寫給她了，她還是要依自己想法來，
最後尾牙陪她一起加班的，
最後的最後，看不下去直接啃她的code幫她改bug的啦
我另一半都問我，那某某是不是對你有意思
我只回...我看起來會是喜歡腦殘公主病患者的人嗎?

反正十幾年職場經驗很多說不完，所以先打住..

再來個人覺得PrimeReact官方文件寫得比PrimeVue清楚許多(尤其在pt敘述上)，
所以我在寫文時，都覺得挺廢話的，最珍貴應只有幾行注意的部分，
當然對PrimeVue文件上見解那是我個人覺得，
畢竟Vue我不能說熟，只能說陌生，說不定高手覺得寫超清楚的，
我最多最多在小夥伴在寫Vue部分的庫時碰到邏輯問題，能給上一兩句意見...
至於實踐上，就是讓專業來的事

關於pt部分我不想在Form說，原因是Form整個層包太淺了，
基本上在這說，我覺得水分太多了(因為根本用不太上)，
我比較傾向放在Tables上說，我覺得會深入很多，

要說pt真的是很好用的東西，所以小夥伴在問的問題時候，
我都會多說一句請善用pt
不會用pt的人就可惜了PrimeVue跟PrimeReact了
為啥沒提PrimeNg?
-因為它沒有

那麼，就繼續今天的Form吧，今天來說說我覺得僅次InputText最常用的元件，
-DropDown跟MultiSelect

DropDown引入

import { Dropdown } from 'primereact/dropdown';

設定State跟一些參數

interface Country {
    name: string;
    code: string;
}
const countries: Country[] = [
    { name: 'Australia', code: 'AU' },
    { name: 'Brazil', code: 'BR' },
    { name: 'China', code: 'CN' },
    { name: 'Egypt', code: 'EG' },
    { name: 'France', code: 'FR' },
    { name: 'Germany', code: 'DE' },
    { name: 'India', code: 'IN' },
    { name: 'Japan', code: 'JP' },
    { name: 'Spain', code: 'ES' },
    { name: 'United States', code: 'US' }
];
//FC內
const [selectedCountry, setSelectedCountry] = useState<Country | null>(null);
const panelFooterTemplate = () => {
        return (
            <div>
                {selectedCountry ? (
                    <span>
                        <b>{selectedCountry.name}</b> selected.
                    </span>
                ) : (
                    'No country selected.'
                )}
            </div>
        );
    };

套元件

<Dropdown
    value={selectedCountry}
    onChange={(e) => setSelectedCountry(e.value)}
    options={countries}
    optionLabel="name"
    placeholder="Select a Country"
    panelFooterTemplate={panelFooterTemplate}
/>

我個人覺得用primeReact 好處就是，
提供很多template，我不確定其他UI套件有沒有，
這貨大大提升元件靈活度，在面對很多次樣式問題時拯救了我...
謝謝template...感恩template

再拉回來，說到MultiSelect又想起了一些不愉快的事情，
在PrimeNg MultiSelect api中
有一項叫readonly的東西，
還有一項叫disabled的東西，在展示時有Show出來，
所以我們2個prime系列開發也是要比照辦理的，
But...就是這個But...PrimeVue跟PrimeReact沒readonly這貨，

因為那時被太看得起，所以我除了開發PrimeReact外同時有其他專案，
旁邊小夥伴就是快樂專注的開發它的PrimeVue，
因此我PrimeReact開發進度稍微慢了一點，
這不就有現成的可以問了!!!
鹹魚如我，我馬上轉頭...
我:你...MultiSelect 的readonly怎麼處理的?
小夥伴:喔，因為沒這api，我就直接把選單部分display:none;

我就直接把選單部分display:none;
我就直接把選單部分display:none;

我愣了一下，
心理OS.姐姐..你是狠人啊

我:可...這樣不是還是trigger了?

(那時候小夥伴怎麼回我..我已經忘了，
為了寫這篇我特地問她，但她說她也忘了)

於是在一夜躺平過後，我想了想...
決定用loading跟loadingIcon結束這回合
畢竟強制隱藏...我真怕它出大事...
小夥伴有沒有採納修改我就不知道了

引用

import { MultiSelect } from 'primereact/multiselect';

設定State跟一些參數

interface City {
    name: string;
    code: string;
}
const cities: City[] = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
];
//FC內
const [selectedCities, setSelectedCities] = useState<City[]>([]);

套元件

<MultiSelect
    className="col"
    value={selectedCities}
    onChange={(e) => setSelectedCities(e.value)}
    options={cities}
    optionLabel="name"
    selectAllLabel="全部"
    placeholder="Select Cities"
    maxSelectedLabels={3}//選超過幾個就顯示縮寫 
    selectedItemsLabel={`已選擇${selectedCities.length}個項目`}//縮寫提示
/>

也可以用useEffect 調整哪個國家要顯示那些城市，
但這是邏輯問題，我就不獻醜了

今天就到此為止啦
明天見!