React + TypeScript 開發Switch組件

開發一個React開關切換組件

這是一篇譯文：

• 原文地址：Build a React Switch Toggle Component
• 本文源代碼： github.com/wangkaiwd/r…

學習如何使用原生 HTML的複選框來開發一個 React開關組件，在這個過程你將會學到許多 React複選框相關的知識。

下面是IOS向世界推出的UI組件，人們把它稱之爲Switch或者Toggle。

咱們在開發什麼

在IOS推出Switch以前，網頁中的布爾輸入只有複選框。複選框固然依舊能夠在今天繼續使用，可是switch根據現實生活中真實的開關改進了複選框。

switch給人真實的感受。相比於點擊複選框，switch的點擊效果就像你在真實的使用一個開關同樣。

所以，在這篇教程中，咱們將會基於原生的HTML複選輸入框來開發一個新的React Switch組件。此外，咱們也會添加一些CSS樣式，來讓簡單、古老的複選框變成一個時髦漂亮的Switch。

編寫Switch的HTML結構

每當我建立一個新的React組件的時候,我會先創建一個初步使人滿意的HTML和CSS結構，而後再去編寫JavaScript代碼。

建立一個Switch.js的新文件，爲它添加以下代碼：

你這時候若是在編輯器中完成了這段代碼，因爲咱們使用了原生複選框來做爲React Switch組件的基礎，你將會看到一個簡單的複選框。

提示：
這裏咱們沒有必要再從新發明一個輪子。畢竟，開關是展現布爾值的另外一種方式，而複選框本來就是用來處理布爾值的輸入框。

用CSS來美化組件

在組件文件的同一目錄下創建Switch.css文件,加入下面的CSS代碼，大概看一下每一個類的用途。我不打算在這篇教程中去探索CSS,文章的重點是JavaScript和React。

使用Switch組件

要在React中使用Switch組件，咱們還須要最後一步：在其它組件中import Switch組件而且在組件中聲明：

保存文件後，能夠看到在瀏覽器中咱們已經將一個簡單的複選框轉換成了一個看上去至關漂亮的Switch輸入框：

經過props來接收事件和屬性

儘管咱們的Switch組件可能看起來很實用，但其實Switch組件並無正真的改變它的value值。

這是由於咱們的組件缺乏了倆個重要的屬性：

• checked
• onChange

checked屬性存儲了input的當前value值。在咱們的組件中，他多是true或false。

每當咱們切換Switch組件時都會觸發onChange事件，咱們將會經過onChange來改變Switch組件的value值。

在編寫代碼以前，咱們須要瞭解一下無狀態組件和有狀態組件。一個無狀態組件也叫作啞吧組件,它不能控制它本身的狀態，所以，須要另一個組件來記錄當前組件的狀態。

咱們的Switch組件將會是一個無狀態組件，它須要父組件經過props來爲它傳遞屬性。

打開Switch.js而且進行以下修改：

代碼相比於以前有2個新增內容：

• checked: 經過父組件傳入的checked來控制是否選中
• onChange: 經過父組件傳入的onChange來更改組件的checked屬性

最後，打開父組件(我使用的是App.tsx)而且修改組件的使用方式：

注意，如今父組件的狀態來自於useState hooks。這意味着這個組件將要向下把傳遞狀態給咱們的Switch組件的checked屬性。

咱們也在onChange函數中向下傳遞了設置函數setChecked。這樣，在Switch組件進行切換改變value值的時候，他將會調用父組件傳下來的onChange函數

切換時改變背景色

若是你完成了上邊的代碼，會發現Switch組件在切換狀態的時候視覺UI上並無什麼不一樣。

因爲咱們可以使用Switch組件中經過父組件props傳遞下來的checked屬性，因此咱們只須要對代碼作一個很簡單的改動就能夠改變Switch組件的背景色。

修改Switch.tsx組件中的label元素，代碼以下：

保存組件，切換到你的瀏覽器頁面你會看到一個完整工做的Switch組件。當Switch組件激活的時候會變成綠色，而當它關閉的時候會變爲灰色。

到這裏，咱們已經擁有了一個完整功能的React Switch組件，它能夠切換、更改value值而且會在激活的時候變爲綠色。

若是你想要知道如何可以指定激活顏色來擴展咱們的Switch組件，那麼請繼續往下閱讀。

指定切換顏色

開發一個靈活的React組件而且可以讓它應用於多種不一樣的場景是一個特別好的編程實踐。例如，咱們可能將會在下面的狀況使用Switch組件：

• 在登陸表單中，告訴網站要記住你的用戶認證信息
• 在一個設置頁面
• 在模態框中用來刪除用戶帳戶

這些只是3個簡單的例子，網頁中還有數不盡的Switch組件的應用場景。

如今有一個問題，咱們的Switch組件在激活的時候只能顯示綠色。假設咱們在模態框中刪除用戶帳戶時想要讓激活顏色變成紅色來更好的提醒用用戶該怎麼辦呢？

讓咱們爲Switch組件添加另一個屬性checkedColor來進行控制激活額顏色：

checkedColor是一個16進制的字符串。保存代碼後，跳轉到父組件併爲聲明的Switch組件添加一個新的checkedColor屬性：

如今咱們已經獲得了一個靈活的、模塊化的Switch組件。