当前位置：首页 > React

react如何实现toggle

2026-01-23 18:20:14React

使用 useState 实现 Toggle

在 React 中，可以通过 useState 钩子轻松实现 toggle 功能。定义一个状态变量和一个更新状态的函数，通过按钮点击或其他事件触发状态切换。

import React, { useState } from 'react';

function ToggleComponent() {
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    setIsToggled(!isToggled);
  };

  return (
    <div>
      <button onClick={handleToggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
      {isToggled && <p>The toggle is ON</p>}
    </div>
  );
}

使用 useReducer 实现 Toggle

对于更复杂的状态逻辑，可以使用 useReducer。定义一个 reducer 函数来管理状态变化，适合多个 toggle 或状态依赖的场景。

import React, { useReducer } from 'react';

const toggleReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE':
      return !state;
    default:
      return state;
  }
};

function ToggleComponent() {
  const [isToggled, dispatch] = useReducer(toggleReducer, false);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'TOGGLE' })}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

自定义 Hook 封装 Toggle

将 toggle 逻辑封装为自定义 Hook，便于复用。自定义 Hook 返回当前状态和切换函数，可以在多个组件中调用。

import { useState } from 'react';

const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = () => setState(!state);
  return [state, toggle];
};

function ToggleComponent() {
  const [isToggled, toggle] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

结合 CSS 实现视觉 Toggle

通过状态切换动态修改 CSS 类名或样式，实现视觉上的 toggle 效果。例如，切换按钮的背景颜色或显示隐藏元素。

import React, { useState } from 'react';
import './ToggleStyles.css';

function ToggleComponent() {
  const [isToggled, setIsToggled] = useState(false);

  return (
    <div>
      <button
        className={isToggled ? 'active' : 'inactive'}
        onClick={() => setIsToggled(!isToggled)}
      >
        Toggle
      </button>
    </div>
  );
}

对应的 CSS 文件可以定义 active 和 inactive 类样式：

.active {
  background-color: green;
}

.inactive {
  background-color: red;
}

第三方库实现 Toggle

使用第三方库如 react-switch 可以快速实现美观的 toggle 开关。安装库后直接使用其提供的组件。

import React, { useState } from 'react';
import Switch from 'react-switch';

function ToggleComponent() {
  const [isToggled, setIsToggled] = useState(false);

  return (
    <div>
      <Switch
        checked={isToggled}
        onChange={() => setIsToggled(!isToggled)}
      />
    </div>
  );
}

安装命令：