>在這裡，React正在控制複選框輸入的狀態。與此輸入的所有交互都必須通過虛擬DOM。如果您嘗試與組件進行交互，那麼什麼都不會發生，因為我們尚未定義任何可以更改我們傳遞的已檢查道具的值的JavaScript代碼。 >
為了解決此問題，我們可以通過OnChange Prop傳遞 - 每當單擊複選框時要調用的函數：>
touch ToggleSwitch.js ToggleSwitch.scss
現在，複選框輸入是交互式的。用戶可以像以前一樣切換組件“ ON”和“ OFF”。這裡唯一的區別是狀態是由React控制的，而不是較早的不受控制的版本。這使我們能夠在任何給定時間通過JavaScript輕鬆訪問組件的狀態。在聲明組件時，我們還可以輕鬆地定義初始值。
>
現在，讓我們看一下如何在toggleswitch組件中使用它。以下是一個簡化的基於類的示例：
import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'
function App() {
return (
<ToggleSwitch />
);
}
export default App;現在，讓我們使用鉤子將基於類的組件轉換為功能組件：>
如您所見，我們使用功能組件和鉤子創建方法大大減少了線數。
如果React Hooks對您來說是新的，則“
React Hooks：如何啟動並構建您的<input type="checkbox" name="name" />
>”。 >
>步驟8 - 最終確定toggleswitch組件
現在，讓我們回到我們的toggleswitch組件。我們需要以下道具：
>由於大多數道具必須由用戶設置，而且我們不能使用任意值，因此，如果未傳遞所需的道具，最好停止渲染。如果可以使用簡單的JavaScript完成此操作，如果語句還是三元運營商使用？ ：或一個短路&&：
隨著應用程序的增長，我們可以通過類型檢查捕獲許多錯誤。 React具有一些內置的類型檢查能力。要運行組件的道具檢查類型，您可以分配特殊的PropTypes屬性。我們可以使用React's Proptypecreate-react-app toggleswitch
庫來執行上述道具列表，這是一個單獨的庫，該庫導出了一系列驗證器，可用於確保您收到的數據有效。 >>>>>>>>>
您可以像這樣安裝它：
mkdir src/ToggleSwitch
然後，使用以下方式導入PropTypes庫
>我們將以以下方式定義Proptypes：
通過解釋方式：
touch ToggleSwitch.js ToggleSwitch.scss
> proptypes.string.isrequired：這是一個字符串值，它是必需的和強制性的。
> proptypes.string：這是一個字符串值，但不是強制性的。 import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'
function App() {
return (
<ToggleSwitch />
);
}
export default App;>
> proptypes.func：此道具將函數作為一個值，但不是強制性的。
<input type="checkbox" name="name" />
> proptypes.bool：這是一個布爾值，但這不是強制性的。 >
> proptypes.array：這是一個數組值，但不是強制性的。 >
-
現在，我們可以使用toggleswitch組件進行。用以下內容替換src/toggleswitch/toggleswitch.js的內容：- >
- >最後，要測試組件，請使用以下代碼更新app.js：>
create-react-app toggleswitch
現在，當您前往> http：// localhost：3000/>時，您應該看到工作切換。
工作切換按鈕
>步驟9 - 使組件鍵盤可訪問
>最後一步是使我們的組件鍵盤可訪問。為此，首先更改下面的標籤：
>
mkdir src/ToggleSwitch
如您所見，我們添加了一個TabIndex屬性，我們將其設置為1（聚焦）或-1（不集中），具體取決於該組件當前是否被禁用。
>我們還聲明了一個句柄Keypress功能來處理它接收鍵盤輸入：>
這檢查鍵是否為空格欄。如果是這樣，它可以防止瀏覽器的默認操作（在這種情況下滾動頁面）並切換組件的狀態。
touch ToggleSwitch.js ToggleSwitch.scss
>本質上是您所需要的。現在，組件可訪問鍵盤。
>但是，有一個小問題。如果您單擊“ toggleswitch組件”，則將獲得整個組件的輪廓，這可能是不足的。為了解決這個問題，我們可以稍微改變事物，以確保當它專注於鍵盤時會收到大綱，但在單擊時不會：：
>在這裡，我們在這兩個內部元素中添加了Tabindex屬性，以確保它們無法接收焦點。
然後，將帶有以下代碼的toggleswitch.scs文件更新toggleswitch.scss文件，以在鍵盤上專注於鍵盤時將樣式應用於toggleswitch的內部元素，而不是單擊時。 import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'
function App() {
return (
<ToggleSwitch />
);
}
export default App;>。
>您可以在此處閱讀有關此技術的更多信息。它有點駭客，應該放棄>使用：focus-visible
，一旦獲得足夠寬的瀏覽器支持。 >
<input type="checkbox" name="name" />
運行應用程序時，您應該能夠使用太空欄切換組件。
>鍵盤可訪問的切換
一個更完整的示例
為了結束，我想演示一個更完整的示例，即在以下代碼框中使用toggleswitch組件。 >
此演示使用同一頁面上的多個toggleswitch組件。最後三個切換的狀態取決於第一個切換的狀態。也就是說，您需要接受營銷電子郵件，然後才能完善您的選擇。
>
摘要
在本文中，我展示瞭如何使用React創建可重複使用的，iOS啟發的React切換組件。我們研究了使用SCSS造型的組件，使其成為受控組件，通過傳遞IT道具對其進行自定義，並使其可訪問鍵盤。
>您可以在我們的>。
關於如何在React中創建一個可重複使用的組件的FAQS的FAQ
我如何自定義React Toggle Switch的外觀？ >
>自定義React撥動開關的外觀非常簡單。您可以修改CSS屬性以滿足您的設計需求。例如，您可以更改開關的背景顏色，邊框顏色，大小和形狀。您還可以添加動畫或過渡以獲得更具交互性的用戶體驗。請記住，保持更改與您的整體應用程序設計一致，以獲得無縫的用戶體驗。
我可以使用功能組件的“開關”按鈕REACT組件？
是的，您可以使用功能組件的React Twoggle Switch。該過程類似於將其與類組件一起使用。您只需要在功能組件中導入並使用開關組件即可。您也可以使用usestate之類的掛鉤來管理開關的狀態。 >
>如何使我的開關按鈕react組件可訪問？ >
可訪問性是Web開發的關鍵方面。為了使您的React Toggle開關可訪問，您可以使用ARIA（可訪問的富Internet應用程序）屬性。例如，您可以使用“ ARIA檢查”屬性來指示交換機的狀態。您還可以添加鍵盤支持，以允許用戶使用鍵盤切換交換機。 >
如何測試我的React Switch組件？
>
測試是開發過程的重要組成部分。您可以使用JEST和React Testing庫等測試庫來測試您的React Switch組件。您可以編寫測試以檢查開關時單擊並正確處理道具時是否正確切換和渲染。
>
>我可以使用Redux使用React Twoggle Switch？
是的，您可以使用Redux使用React Twoggle Switch。您可以使用Redux操作和還原器來管理開關狀態。如果需要在多個組件上共享開關狀態，或者它影響應用程序的全局狀態。
>如何在我的React切換開關中添加標籤？
>將標籤添加到您的React撥動開關可以提高其可用性。您可以通過將React Switch組件包裝在“標籤”元素中來添加標籤。您也可以使用“ htmlfor”屬性將標籤與交換機相關聯。
>
我如何處理React Toggle Switch組件中的錯誤？
錯誤處理是任何組件的重要組成部分。在您的React Toggle開關組件中，您可以使用Try-Catch塊來處理錯誤。您還可以使用錯誤邊界，這是一種捕獲和處理組件中錯誤的React功能。
>我可以以形式使用React切換開關嗎？
是的，您可以使用表單中的React Twoggle開關。您可以在表單狀態下處理開關狀態。您還可以處理表單提交表單，並使用開關狀態執行某些操作。 >
我如何使我的react切換開關動畫？ >
動畫您的React切換開關可以增強用戶體驗。您可以使用CSS過渡或動畫來對開關進行動畫動畫，也可以使用React Spring（例如React Spring）進行更複雜的動畫。
>我可以將React Twoggle Switch與Typescript使用嗎？
是的，您可以將React Twoggle Switch與Typescript一起使用。您只需要定義道具的類型和交換機的狀態即可。這可以幫助您在開發過程中捕獲錯誤，並使您的代碼更加穩健和可維護。
>
如何優化開關切換的性能？
>
>您可以使用React的備忘錄功能來防止不必要的重新租戶來優化React切換開關的性能。
>如何以單一形式處理多個切換開關的狀態管理？
>您可以通過使用對象存儲每個交換機的狀態，以單個形式管理多個切換開關的狀態。這使您可以輕鬆更新和訪問每個交換機的狀態，從而使表單更有效地處理。
