獲取驗證碼組件

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

圖片

最基礎的組件

我們可以從簡單的開始，先實現一個比較簡單基礎的組件，后面再去完善它，最基礎的代碼如下：

圖片

這個時候可以看到這個組件的雛形已經出來了！

圖片

實現倒計時

接下來我們需要寫一個 useCountDown 的 Hooks ，來編寫倒計時的邏輯~大家在風中組件的時候，要有這種習慣，就是把一些邏輯比較緊密的代碼抽取到一個 Hooks 中去。

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

圖片

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

圖片

這樣就能達到想要的倒計時效果，但是還是有很多不足，比如按鈕沒有禁用，而且尺寸不能自定義，也沒有響應式把驗證碼內容暴露出去

圖片

完善組件封裝

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

可以把這個組件拆成兩個部分：

• CountdownInput輸入框
• CountButton按鈕

CountdownInput輸入框

圖片

CountButton

圖片

最終使用

圖片

效果如下：

圖片