在React中創建一個切換開關作為可重複使用的組件

您可以像這樣安裝它：

mkdir src/ToggleSwitch

>我們將以以下方式定義Proptypes：

通過解釋方式：

touch ToggleSwitch.js ToggleSwitch.scss

> proptypes.string.isrequired：這是一個字符串值，它是必需的和強制性的。

import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

> proptypes.func：此道具將函數作為一個值，但不是強制性的。

<input type="checkbox" name="name"  />

>

>
現在，我們可以使用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切換開關的性能。

  >如何以單一形式處理多個切換開關的狀態管理？

  >您可以通過使用對象存儲每個交換機的狀態，以單個形式管理多個切換開關的狀態。這使您可以輕鬆更新和訪問每個交換機的狀態，從而使表單更有效地處理。