獲取驗(yàn)證碼組件

最近封裝了一個(gè) 獲取驗(yàn)證碼 的組件，雖然算是一個(gè)比較小的組件，但是還是感覺比較有意思的，大致效果如下：

圖片

最基礎(chǔ)的組件

我們可以從簡(jiǎn)單的開始，先實(shí)現(xiàn)一個(gè)比較簡(jiǎn)單基礎(chǔ)的組件，后面再去完善它，最基礎(chǔ)的代碼如下：

圖片

這個(gè)時(shí)候可以看到這個(gè)組件的雛形已經(jīng)出來(lái)了！

圖片

實(shí)現(xiàn)倒計(jì)時(shí)

接下來(lái)我們需要寫一個(gè) useCountDown 的 Hooks ，來(lái)編寫倒計(jì)時(shí)的邏輯~大家在風(fēng)中組件的時(shí)候，要有這種習(xí)慣，就是把一些邏輯比較緊密的代碼抽取到一個(gè) Hooks 中去。

注意：setState 是異步更新，所以想獲取最新值需要使用useRef。

圖片

封裝完后可以到組件中去使用。

圖片

這樣就能達(dá)到想要的倒計(jì)時(shí)效果，但是還是有很多不足，比如按鈕沒有禁用，而且尺寸不能自定義，也沒有響應(yīng)式把驗(yàn)證碼內(nèi)容暴露出去

圖片

完善組件封裝

上面的組件封裝的太簡(jiǎn)單了，一個(gè)好的組件需要具有比較好的自定義性、拓展性，所以我們需要完善一下組件的封裝

可以把這個(gè)組件拆成兩個(gè)部分：

• CountdownInput輸入框
• CountButton按鈕

CountdownInput輸入框

圖片

CountButton

圖片

最終使用

圖片

效果如下：

圖片