如何在React中实现Switch组件的开关功能？

Question

如何在React中实现Switch组件的开关功能？

Answer 1

import React, { useState } from 'react';

const Switch = ({ isOn, handleToggle, onColor = '#4CD964', offColor = '#ccc' }) => {
  return (
    <label className="switch">
      <input
        type="checkbox"
        checked={isOn}
        onChange={handleToggle}
        className="switch-checkbox"
      />
      <span className="switch-slider" style={{
        backgroundColor: isOn ? onColor : offColor
      }}>
        <span className="switch-knob" style={{
          transform: isOn ? 'translateX(24px)' : 'translateX(0)'
        }} />
      </span>
    </label>
  );
};