Cách tạo một node chuyển đổi tùy chỉnh với React

Việc xây dựng các ứng dụng web thường bao gồm việc đưa ra các điều khoản cho các tương tác của user . Một trong những cách quan trọng để cung cấp cho các tương tác của user là thông qua biểu mẫu. Các thành phần biểu mẫu khác nhau tồn tại để lấy các loại đầu vào khác nhau từ user . Ví dụ, một thành phần password lấy thông tin nhạy cảm từ user và che giấu nó để nó không hiển thị.

---

Hầu hết thông tin bạn cần lấy từ user có dạng boolean - ví dụ: có hoặc không , đúng hoặc sai , bật hoặc tắt , bật hoặc tắt , v.v. Theo truyền thống, thành phần biểu mẫu hộp kiểm được sử dụng để nhận các loại này của đầu vào. Tuy nhiên, trong các thiết kế giao diện hiện đại, lựa chọn bật tắt thường được sử dụng để thay thế hộp kiểm, mặc dù có một số lo ngại về khả năng truy cập.

Trong hướng dẫn này, bạn sẽ thấy cách xây dựng thành phần lựa chọn bật tắt tùy chỉnh với React. Ở cuối hướng dẫn, bạn sẽ có một ứng dụng React demo sử dụng thành phần lựa chọn bật tắt tùy chỉnh của bạn.

Đây là bản demo của ứng dụng cuối cùng mà bạn sẽ xây dựng trong hướng dẫn này:

Yêu cầu

Trước khi bắt đầu, bạn cần những điều sau:

• Node.js và npm version 5.2 trở lên được cài đặt trên máy của bạn. Để cài đặt Node và kiểm tra version npm của bạn, vui lòng tham khảo hướng dẫn Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ cho môi trường của bạn. Sử dụng npm 5.2 trở lên sẽ cho phép bạn tận dụng lệnh npx . npx sẽ cho phép bạn chạy create-react-app mà không cần download gói trên phạm vi global .

• Hướng dẫn này giả định bạn đã quen thuộc với React. Nếu không, bạn có thể xem loạt bài hướng dẫn Cách viết mã trong React.js hoặc đọc Tài liệu về React để tìm hiểu thêm về React.

Bước 1 - Bắt đầu

Để bắt đầu, hãy tạo một ứng dụng React mới với npx và create-react-app npx create-react-app . Bạn có thể đặt tên ứng dụng bạn muốn , nhưng hướng dẫn này sẽ sử dụng react-toggle-switch :

npx create-react-app react-toggle-switch 

Tiếp theo, bạn sẽ cài đặt các phụ thuộc cần thiết cho ứng dụng của bạn . Sử dụng cửa sổ terminal để chuyển đến folder dự án:

cd react-toggle-switch 

Chạy lệnh sau để cài đặt các phụ thuộc :

npm install bootstrap@4.5.0 lodash@4.17.15 prop-types@15.7.2 classnames@2.2.6 node-sass@4.14.1 

Lưu ý: Đảm bảo version node-sass bạn đang cài đặt tương thích với môi trường của bạn bằng cách tham khảo hướng dẫn nhanh để được hỗ trợ tối thiểu .

Bạn đã cài đặt gói bootstrap làm phụ thuộc cho ứng dụng của bạn vì bạn cần một số kiểu mặc định. Để bao gồm Bootstrap trong ứng dụng, hãy chỉnh sửa file src/index.js và thêm dòng sau trước mọi câu lệnh import khác:

import "bootstrap/dist/css/bootstrap.min.css"; 

Khởi động ứng dụng bằng cách chạy lệnh sau với npm :

npm start 

Với ứng dụng bắt đầu, quá trình phát triển có thể bắt đầu. Lưu ý một tab trình duyệt đã được mở cho bạn với chức năng reload trực tiếp . Reload trực tiếp sẽ tiếp tục đồng bộ với các thay đổi đối với ứng dụng khi bạn phát triển.

Đến đây, chế độ xem ứng dụng sẽ giống như ảnh chụp màn hình sau:

Tiếp theo, bạn sẽ tạo thành phần chuyển đổi của bạn .

Bước 2 - Tạo thành phần ToggleSwitch

Trước khi xây dựng thành phần, hãy tạo một folder mới có tên components bên trong folder src của dự án của bạn.

mkdir -p src/components 

Tiếp theo, tạo một folder mới khác có tên ToggleSwitch bên trong folder components .

mkdir -p src/components/ToggleSwitch 

Bạn sẽ tạo hai file mới bên trong src/components/ToggleSwitch , đó là: index.js và index.scss . Tạo và mở index.js bằng editor yêu thích của bạn:

nano src/components/ToggleSwitch/index.js 

Thêm nội dung sau vào file src/components/ToggleSwitch/index.js :

import PropTypes from 'prop-types'; import classnames from 'classnames'; import isString from 'lodash/isString'; import React, { Component } from 'react'; import isBoolean from 'lodash/isBoolean'; import isFunction from 'lodash/isFunction'; import './index.scss';  class ToggleSwitch extends Component {}  ToggleSwitch.propTypes = {   theme: PropTypes.string,   enabled: PropTypes.oneOfType([     PropTypes.bool,     PropTypes.func   ]),   onStateChanged: PropTypes.func }  export default ToggleSwitch; 

Trong đoạn mã này, bạn đã tạo thành phần ToggleSwitch và thêm kiểm tra loại cho một số đạo cụ của nó.

• theme : là một string biểu thị kiểu và màu sắc cho lựa chọn bật tắt.
• enabled : có thể là một boolean hoặc một function trả về một boolean và nó xác định trạng thái của lựa chọn bật tắt khi nó được hiển thị.
• onStateChanged : là một hàm gọi lại sẽ được gọi khi trạng thái của lựa chọn bật tắt thay đổi. Điều này hữu ích để kích hoạt các hành động trên thành phần chính khi lựa chọn được bật.

Khởi tạo trạng thái ToggleSwitch

Trong đoạn mã sau, bạn khởi tạo trạng thái của thành phần ToggleSwitch và xác định một số phương thức thành phần để có được trạng thái của lựa chọn bật tắt.

// ...  class ToggleSwitch extends Component {   state = { enabled: this.enabledFromProps() }    isEnabled = () => this.state.enabled    enabledFromProps() {     let { enabled } = this.props;      // If enabled is a function, invoke the function     enabled = isFunction(enabled) ? enabled() : enabled;      // Return enabled if it is a boolean, otherwise false     return isBoolean(enabled) && enabled;   } }  // ... 

Ở đây, phương thức enabledFromProps() giải quyết phần enabled đã được chuyển và trả về một boolean cho biết liệu lựa chọn có được bật khi nó được hiển thị hay không. Nếu prop enabled là boolean , nó sẽ trả về giá trị boolean. Nếu đó là một function , trước tiên nó gọi hàm trước khi xác định xem giá trị trả về có phải là boolean . Nếu không, nó trả về false .

Lưu ý bạn đã sử dụng giá trị trả về từ enabledFromProps() để đặt trạng thái enabled ban đầu. Bạn cũng đã thêm phương thức isEnabled() để có được trạng thái enabled hiện tại.

Chuyển đổi ToggleSwitch

Hãy tiếp tục và thêm phương thức bật tắt lựa chọn khi nó được nhấp vào. Thêm mã sau vào file :

// ...  class ToggleSwitch extends Component {    // ...other class members here    toggleSwitch = evt => {     evt.persist();     evt.preventDefault();      const { onClick, onStateChanged } = this.props;      this.setState({ enabled: !this.state.enabled }, () => {       const state = this.state;        // Augument the event object with SWITCH_STATE       const switchEvent = Object.assign(evt, { SWITCH_STATE: state });        // Execute the callback functions       isFunction(onClick) && onClick(switchEvent);       isFunction(onStateChanged) && onStateChanged(state);     });   } }  // ... 

Vì phương thức này sẽ được kích hoạt dưới dạng trình xử lý sự kiện click , bạn đã khai báo nó với tham số evt . Đầu tiên, phương thức này chuyển đổi trạng thái enabled hiện tại bằng cách sử dụng toán tử logic NOT ( ! ). Khi trạng thái đã được cập nhật, nó sẽ kích hoạt các hàm gọi lại được chuyển tới các đạo cụ onClick và onStateChanged .

Lưu ý vì onClick yêu cầu một sự kiện làm đối số đầu tiên của nó, bạn đã tăng cường sự kiện với một SWITCH_STATE tính SWITCH_STATE bổ sung có chứa đối tượng trạng thái mới. Tuy nhiên, lệnh gọi lại onStateChanged được gọi với đối tượng trạng thái mới.

Kết xuất ToggleSwitch

Cuối cùng, hãy triển khai phương thức render() của thành phần ToggleSwitch . Thêm mã sau vào file :

// ...  class ToggleSwitch extends Component {    // ...other class members here    render() {     const { enabled } = this.state;      // Isolate special props and store the remaining as restProps     const { enabled: _enabled, theme, onClick, className, onStateChanged, ...restProps } = this.props;      // Use default as a fallback theme if valid theme is not passed     const switchTheme = (theme && isString(theme)) ? theme : 'default';      const switchClasses = classnames(       `switch switch--${switchTheme}`,       className     )      const togglerClasses = classnames(       'switch-toggle',       `switch-toggle--${enabled ? 'on' : 'off'}`     )      return (       <div className={switchClasses} onClick={this.toggleSwitch} {...restProps}>         <div className={togglerClasses}></div>       </div>     )   } }  // ... 

Rất nhiều điều đang xảy ra trong phương thức render() này, vì vậy hãy chia nhỏ nó một chút:

1. Đầu tiên, trạng thái enabled sẽ bị hủy khỏi trạng thái thành phần.
2. Tiếp theo, bạn hủy cấu trúc các props thành phần và extract các restProps sẽ được chuyển cho lựa chọn . Điều này cho phép bạn chặn và cô lập các đạo cụ đặc biệt của thành phần.
3. Tiếp theo, bạn sử dụng tên lớp để xây dựng các lớp cho lựa chọn và bộ chuyển đổi bên trong, dựa trên theme và trạng thái enabled của thành phần.
4. Cuối cùng, bạn kết xuất các phần tử DOM với các lớp và đạo cụ thích hợp. Lưu ý bạn đã chuyển trong this.toggleSwitch với quyền là trình nghe sự kiện click trên lựa chọn .

Lưu và đóng file .

Đến đây bạn đã tạo ToggleSwitch .

Bước 3 - Tạo kiểu cho ToggleSwitch

Đến đây bạn đã có thành phần ToggleSwitch và chức năng cần thiết của nó, bạn có thể tiếp tục và viết các kiểu cho nó.

Mở file index.scss bằng editor yêu thích của bạn:

nano src/components/ToggleSwitch/index.scss 

Thêm đoạn mã sau vào file :

// DEFAULT COLOR VARIABLES  $ball-color: #ffffff; $active-color: #62c28e; $inactive-color: #cccccc;  // DEFAULT SIZING VARIABLES  $switch-size: 32px; $ball-spacing: 2px; $stretch-factor: 1.625;  // DEFAULT CLASS VARIABLE  $switch-class: 'switch-toggle';   /* SWITCH MIXIN */  @mixin switch($size: $switch-size, $spacing: $ball-spacing, $stretch: $stretch-factor, $color: $active-color, $class: $switch-class) {} 

Ở đây, bạn đã xác định một số biến mặc định và tạo một mixin switch . Trong phần tiếp theo, bạn sẽ triển khai mixin, nhưng trước tiên, hãy kiểm tra các thông số của switch mixin:

• $size : Chiều cao của phần tử chuyển đổi. Nó phải có một đơn vị độ dài. Nó mặc định là 32px .
• $spacing : Khoảng trống giữa quả bóng tròn và hộp chứa lựa chọn . Nó phải có một đơn vị độ dài. Nó mặc định là 2px .
• $stretch : Một hệ số được sử dụng để xác định mức độ giãn rộng của phần tử switch. Nó phải là một số không có đơn vị. Nó mặc định là 1.625 .
• $color : Màu của lựa chọn khi ở trạng thái hoạt động. Đây phải là một giá trị màu hợp lệ. Lưu ý quả bóng tròn luôn có màu trắng dù màu này là gì.
• $class : Lớp cơ sở để xác định lựa chọn . Điều này được sử dụng để tạo các lớp trạng thái của switch một cách động. Nó được mặc định là 'switch-toggle' . Do đó, các lớp trạng thái mặc định là .switch-toggle--on và .switch-toggle--off .

Triển khai Mixin Switch

Đây là cách thực hiện của switch mixin:

// ...  @mixin switch($size: $switch-size, $spacing: $ball-spacing, $stretch: $stretch-factor, $color: $active-color, $class: $switch-class) {    // SELECTOR VARIABLES    $self: '.' + $class;   $on: #{$self}--on;   $off: #{$self}--off;    // SWITCH VARIABLES    $active-color: $color;   $switch-size: $size;   $ball-spacing: $spacing;   $stretch-factor: $stretch;   $ball-size: $switch-size - ($ball-spacing * 2);   $ball-slide-size: ($switch-size * ($stretch-factor - 1) + $ball-spacing);    // SWITCH STYLES    height: $switch-size;   width: $switch-size * $stretch-factor;   cursor: pointer !important;   user-select: none !important;   position: relative !important;   display: inline-block;    &#{$on},   &#{$off} {     &::before,     &::after {       content: '';       left: 0;       position: absolute !important;     }      &::before {       height: inherit;       width: inherit;       border-radius: $switch-size / 2;       will-change: background;       transition: background .4s .3s ease-out;     }      &::after {       top: $ball-spacing;       height: $ball-size;       width: $ball-size;       border-radius: $ball-size / 2;       background: $ball-color !important;       will-change: transform;       transition: transform .4s ease-out;     }   }    &#{$on} {     &::before {       background: $active-color !important;     }     &::after {       transform: translateX($ball-slide-size);     }   }    &#{$off} {     &::before {       background: $inactive-color !important;     }     &::after {       transform: translateX($ball-spacing);     }   }  } 

Trong mixin này, bạn bắt đầu bằng cách cài đặt một số biến dựa trên các tham số được truyền cho mixin. Tiếp theo, bạn tạo các kiểu. Lưu ý bạn đang sử dụng phần tử giả ::after và ::before để tạo động các thành phần của switch. ::before tạo containers switch while ::after tạo quả cầu tròn.

Ngoài ra, hãy lưu ý cách bạn đã xây dựng các lớp trạng thái từ lớp cơ sở và gán chúng cho các biến. Biến $on ánh xạ tới bộ chọn cho trạng thái đã bật, trong khi biến $off ánh xạ tới bộ chọn cho trạng thái đã tắt.

Bạn cũng đảm bảo lớp cơ sở ( .switch-toggle ) phải được sử dụng cùng với lớp trạng thái ( .switch-toggle--on hoặc .switch-toggle--off ) để các kiểu có sẵn. Do đó, bạn đã sử dụng các bộ chọn &#{$on} và &#{$off} .

Tạo lựa chọn theo chủ đề

Đến đây bạn đã có switch mixin, bạn sẽ tiếp tục tạo một số kiểu theo chủ đề cho lựa chọn bật tắt. Bạn sẽ tạo hai chủ đề: default và graphite-small .

Nối đoạn mã sau vào file src/components/ToggleSwitch/index.scss :

// ...  @function get-switch-class($selector) {    // First parse the selector using `selector-parse`   // Extract the first selector in the first list using `nth` twice   // Extract the first simple selector using `simple-selectors` and `nth`   // Extract the class name using `str-slice`    @return str-slice(nth(simple-selectors(nth(nth(selector-parse($selector), 1), 1)), 1), 2);  }  .switch {   $self: &;   $toggle: #{$self}-toggle;   $class: get-switch-class($toggle);    // default theme   &#{$self}--default > #{$toggle} {      // Always pass the $class to the mixin     @include switch($class: $class);    }    // graphite-small theme   &#{$self}--graphite-small > #{$toggle} {      // A smaller switch with a `gray` active color     // Always pass the $class to the mixin     @include switch($color: gray, $size: 20px, $class: $class);    } } 

Ở đây, trước tiên bạn tạo một hàm Sass có tên get-switch-class lấy $selector làm tham số. Nó chạy $selector thông qua một chuỗi các hàm Sass và cố gắng extract tên lớp đầu tiên. Ví dụ: nếu nó nhận được:

• .class-1 .class-2, .class-3 .class-4 , nó trả về class-1 .
• .class-5.class-6 > .class-7.class-8 , nó trả về class-5 .

Tiếp theo, bạn xác định kiểu cho lớp .switch . Bạn đặt động lớp chuyển đổi thành .switch-toggle và gán nó cho biến $toggle . Lưu ý bạn gán tên lớp được trả về từ lệnh gọi hàm get-switch-class() cho biến $class . Cuối cùng, bạn đưa vào switch mixin với các thông số cần thiết để tạo các lớp chủ đề.

Lưu ý cấu trúc của bộ chọn cho lựa chọn theo chủ đề trông giống như sau: &#{$self}--default > #{$toggle} ( sử dụng chủ đề mặc định làm ví dụ ). Đặt mọi thứ lại với nhau, điều này nghĩa là hệ thống phân cấp của phần tử sẽ giống như sau để các kiểu được áp dụng:

<!-- Use the default theme: switch--default  --> <element class="switch switch--default">    <!-- The switch is in enabled state: switch-toggle--on -->   <element class="switch-toggle switch-toggle--on"></element>  </element> 

Dưới đây là bản trình diễn cho thấy các chủ đề chuyển đổi chuyển đổi trông như thế nào:

Bước 4 - Xây dựng ứng dụng mẫu

Đến đây bạn đã có thành phần ToggleSwitch React với kiểu dáng cần thiết, hãy tiếp tục và bắt đầu tạo ứng dụng mẫu mà bạn đã thấy ở đầu hướng dẫn.

Sửa đổi file src/App.js để trông giống như đoạn mã sau:

import classnames from 'classnames'; import snakeCase from 'lodash/snakeCase'; import React, { Component } from 'react'; import Switch from './components/ToggleSwitch'; import './App.css';  // List of activities that can trigger notifications const ACTIVITIES = [   'News Feeds', 'Likes and Comments', 'Live Stream', 'Upcoming Events',   'Friend Requests', 'Nearby Friends', 'Birthdays', 'Account Sign-In' ];  class App extends Component {    // Initialize app state, all activities are enabled by default   state = { enabled: false, only: ACTIVITIES.map(snakeCase) }    toggleNotifications = ({ enabled }) => {     const { only } = this.state;     this.setState({ enabled, only: enabled ? only : ACTIVITIES.map(snakeCase) });   }    render() {     const { enabled } = this.state;      const headingClasses = classnames(       'font-weight-light h2 mb-0 pl-4',       enabled ? 'text-dark' : 'text-secondary'     );      return (       <div className="App position-absolute text-left d-flex justify-content-center align-items-start pt-5 h-100 w-100">         <div className="d-flex flex-wrap mt-5" style={{width: 600}}>            <div className="d-flex p-4 border rounded align-items-center w-100">             <Switch theme="default"               className="d-flex"               enabled={enabled}               onStateChanged={this.toggleNotifications}             />              <span className={headingClasses}>Notifications</span>           </div>            {/* ... Notification options here ... */}          </div>       </div>     );   }  }  export default App; 

Tại đây, bạn khởi tạo hằng số ACTIVITIES với một loạt các hoạt động có thể kích hoạt thông báo. Tiếp theo, bạn khởi tạo trạng thái ứng dụng với hai thuộc tính:

• enabled : boolean cho biết liệu thông báo có được bật hay không.
• only : một array chứa tất cả các hoạt động được bật để kích hoạt thông báo.

Bạn đã sử dụng trình snakeCase từ Lodash để chuyển đổi các hoạt động thành snakecase trước khi cập nhật trạng thái. Do đó, 'News Feeds' trở thành 'news_feeds' .

Tiếp theo, bạn đã xác định phương thức toggleNotifications() cập nhật trạng thái ứng dụng dựa trên trạng thái mà nó nhận được từ lựa chọn thông báo. Điều này được sử dụng làm hàm gọi lại được chuyển đến phần hỗ trợ onStateChanged của lựa chọn bật tắt. Lưu ý khi ứng dụng được bật, tất cả các hoạt động sẽ được bật theo mặc định, vì thuộc tính trạng thái only được điền đầy đủ các hoạt động.

Cuối cùng, bạn đã hiển thị các phần tử DOM cho ứng dụng và để lại một vị trí cho các tùy chọn thông báo, sẽ sớm được thêm vào. Đến đây, ứng dụng sẽ giống như ảnh chụp màn hình sau:

Tiếp theo, hãy tiếp tục và tìm dòng có comment này:

{/* ... Notification options here ... */} 

Và thay thế nó bằng nội dung sau để hiển thị các tùy chọn thông báo:

// ...  { enabled && (    <div className="w-100 mt-5">     <div className="container-fluid px-0">        <div className="pt-5">         <div className="d-flex justify-content-between align-items-center">           <span className="d-block font-weight-bold text-secondary small">Email Address</span>           <span className="text-secondary small mb-1 d-block">             <small>Provide a valid email address with which to receive notifications.</small>           </span>         </div>          <div className="mt-2">           <input type="text" placeholder="mail@domain.com" className="form-control" style={{ fontSize: 14 }} />         </div>       </div>        <div className="pt-5 mt-4">         <div className="d-flex justify-content-between align-items-center border-bottom pb-2">           <span className="d-block font-weight-bold text-secondary small">Filter Notifications</span>           <span className="text-secondary small mb-1 d-block">             <small>Select the account activities for which to receive notifications.</small>           </span>         </div>          <div className="mt-5">           <div className="row flex-column align-content-start" style={{ maxHeight: 180 }}>             { this.renderNotifiableActivities() }           </div>         </div>       </div>      </div>   </div>  ) } 

Bạn có thể nhận thấy rằng bạn đã gọi this.renderNotifiableActivities() để hiển thị các hoạt động. Hãy tiếp tục và thực hiện phương pháp này và các phương pháp còn lại khác.

Thêm các phương thức sau vào thành phần App :

// ...  class App extends Component {   // ...    toggleActivityEnabled = activity => ({ enabled }) => {     let { only } = this.state;      if (enabled && !only.includes(activity)) {       only.push(activity);       return this.setState({ only });     }      if (!enabled && only.includes(activity)) {       only = only.filter(item => item !== activity);       return this.setState({ only });     }   }    renderNotifiableActivities() {     const { only } = this.state;      return ACTIVITIES.map((activity, index) => {       const key = snakeCase(activity);       const enabled = only.includes(key);        const activityClasses = classnames(         'small mb-0 pl-3',         enabled ? 'text-dark' : 'text-secondary'       );        return (         <div key={index} className="col-5 d-flex mb-3">           <Switch theme="graphite-small"             className="d-flex"             enabled={enabled}             onStateChanged={ this.toggleActivityEnabled(key) }           />            <span className={activityClasses}>{ activity }</span>         </div>       );     })   }    // ... } 

Tại đây, bạn đã triển khai phương thức renderNotifiableActivities . Bạn lặp lại tất cả các hoạt động bằng cách sử dụng ACTIVITIES.map() và hiển thị từng hoạt động bằng một lựa chọn bật tắt cho nó. Lưu ý lựa chọn bật tắt sử dụng chủ đề graphite-small . Bạn cũng phát hiện trạng thái enabled của từng hoạt động bằng cách kiểm tra xem nó đã tồn tại trong biến trạng thái only .

Cuối cùng, bạn đã xác định phương thức toggleActivityEnabled được sử dụng để cung cấp hàm gọi lại cho phần hỗ trợ onStateChanged của lựa chọn bật tắt của mỗi hoạt động. Bạn đã xác định nó là một hàm bậc cao hơn để bạn có thể chuyển hoạt động làm đối số và trả về hàm gọi lại. Nó kiểm tra xem một hoạt động đã được kích hoạt chưa và cập nhật trạng thái cho phù hợp.

Bây giờ, ứng dụng sẽ giống như ảnh chụp màn hình sau:

Nếu bạn muốn tắt tất cả các hoạt động theo mặc định, thay vì bật như trong ảnh chụp màn hình ban đầu, thì bạn có thể áp dụng các thay đổi sau đối với thành phần App :

[src/App.js] // ...  class App extends Component {    // Initialize app state, all activities are disabled by default   state = { enabled: false, only: [] }    toggleNotifications = ({ enabled }) => {     const { only } = this.state;     this.setState({ enabled, only: enabled ? only : [] });   } } 

Ở bước này, bạn đã hoàn thành việc xây dựng lựa chọn bật tắt của bạn . Trong bước tiếp theo, bạn sẽ học cách cải thiện khả năng truy cập vào ứng dụng.

Bước 5 - Giải quyết các Mối quan tâm về Trợ năng

Sử dụng lựa chọn bật / tắt trong các ứng dụng của bạn thay vì các hộp kiểm truyền thống có thể cho phép bạn tạo giao diện gọn gàng hơn, đặc biệt là vì việc tạo kiểu hộp kiểm truyền thống theo cách bạn muốn là một thách thức.

Tuy nhiên, việc sử dụng lựa chọn bật tắt thay vì hộp kiểm có một số vấn đề về khả năng tiếp cận, vì tác nhân user có thể không diễn giải chính xác chức năng của thành phần.

Có thể thực hiện một số việc để cải thiện khả năng tiếp cận của lựa chọn bật tắt và cho phép tác nhân user hiểu đúng role . Ví dụ: bạn có thể sử dụng các thuộc tính ARIA sau:

<switch-element tabindex="0" role="switch" aria-checked="true" aria-labelledby="#label-element"></switch-element> 

Bạn cũng có thể nghe nhiều sự kiện hơn trên lựa chọn đổi để tạo ra nhiều cách user có thể tương tác với thành phần.

Kết luận

Trong hướng dẫn này, bạn đã tạo một lựa chọn bật tắt tùy chỉnh cho các ứng dụng React của bạn với kiểu dáng phù hợp hỗ trợ các chủ đề khác nhau. Bạn đã khám phá cách bạn có thể sử dụng nó trong ứng dụng của bạn thay vì các hộp kiểm truyền thống. Ngoài ra, bạn đã khám phá các mối quan tâm liên quan đến khả năng tiếp cận và những gì bạn có thể làm để cải thiện.

Để có mã nguồn hoàn chỉnh của hướng dẫn này, hãy xem repository trình diễn react -toggle-switch-demo trên GitHub. Bạn cũng có thể nhận bản demo trực tiếp của hướng dẫn này trên Code Sandbox .

---

---

Các tin liên quan