当前位置：首页 > React

react实现开关组件

2026-01-27 09:04:26React

实现开关组件的方法

使用 useState 管理状态

在 React 中，可以通过 useState 钩子来管理开关组件的状态。定义一个布尔状态变量来表示开关的开启或关闭状态。

import React, { useState } from 'react';

function ToggleSwitch() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div 
      onClick={toggleSwitch}
      style={{
        width: '50px',
        height: '25px',
        backgroundColor: isOn ? 'green' : 'gray',
        borderRadius: '25px',
        cursor: 'pointer',
        position: 'relative',
      }}
    >
      <div
        style={{
          width: '20px',
          height: '20px',
          backgroundColor: 'white',
          borderRadius: '50%',
          position: 'absolute',
          top: '2.5px',
          left: isOn ? '27.5px' : '2.5px',
          transition: 'left 0.2s ease-in-out',
        }}
      />
    </div>
  );
}

export default ToggleSwitch;

添加自定义样式和动画

为了提升用户体验，可以为开关组件添加过渡动画效果。通过 CSS 的 transition 属性，可以平滑地切换开关的位置和背景颜色。

<div
  style={{
    width: '50px',
    height: '25px',
    backgroundColor: isOn ? 'green' : 'gray',
    borderRadius: '25px',
    cursor: 'pointer',
    position: 'relative',
    transition: 'background-color 0.2s ease-in-out',
  }}
>
  <div
    style={{
      width: '20px',
      height: '20px',
      backgroundColor: 'white',
      borderRadius: '50%',
      position: 'absolute',
      top: '2.5px',
      left: isOn ? '27.5px' : '2.5px',
      transition: 'left 0.2s ease-in-out',
    }}
  />
</div>

添加事件处理

开关组件通常需要响应用户的点击事件。可以通过 onClick 事件来触发状态切换，并将状态变化传递给父组件（如果需要）。

const toggleSwitch = () => {
  setIsOn(!isOn);
  // 如果需要将状态传递给父组件
  if (props.onToggle) {
    props.onToggle(!isOn);
  }
};

使用第三方库

如果需要更复杂的开关组件或不想从头实现，可以使用第三方库如 react-switch。安装后直接使用即可。

npm install react-switch

import React from 'react';
import Switch from 'react-switch';

function ToggleSwitch() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = (checked) => {
    setIsOn(checked);
  };

  return (
    <Switch
      checked={isOn}
      onChange={toggleSwitch}
      onColor="#86d3ff"
      offColor="#888"
      checkedIcon={false}
      uncheckedIcon={false}
    />
  );
}

export default ToggleSwitch;

添加无障碍支持

为了确保开关组件对屏幕阅读器等辅助技术友好，可以添加 aria-label 和 role 属性。

react实现开关组件

<div
  onClick={toggleSwitch}
  role="switch"
  aria-checked={isOn}
  aria-label="Toggle switch"
  style={{
    width: '50px',
    height: '25px',
    backgroundColor: isOn ? 'green' : 'gray',
    borderRadius: '25px',
    cursor: 'pointer',
    position: 'relative',
  }}
>
  <div
    style={{
      width: '20px',
      height: '20px',
      backgroundColor: 'white',
      borderRadius: '50%',
      position: 'absolute',
      top: '2.5px',
      left: isOn ? '27.5px' : '2.5px',
      transition: 'left 0.2s ease-in-out',
    }}
  />
</div>