当前位置：首页 > React

react 实现toggle效果

2026-01-27 03:34:27React

使用 useState 实现 Toggle

在 React 中，可以通过 useState 钩子来管理 toggle 的状态。创建一个布尔状态变量，并通过点击事件切换其值。

import React, { useState } from 'react';

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

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

使用 CSS 类切换样式

可以通过状态变量动态切换 CSS 类名，实现视觉上的 toggle 效果。

react 实现toggle效果

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

function ToggleComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div 
      className={`toggle ${isActive ? 'active' : ''}`}
      onClick={() => setIsActive(!isActive)}
    >
      Toggle Me
    </div>
  );
}

对应的 CSS 文件：

.toggle {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}

.toggle.active {
  background-color: #4CAF50;
  color: white;
}

使用自定义 Hook 封装 Toggle 逻辑

将 toggle 逻辑封装成自定义 Hook，便于复用。

react 实现toggle效果

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

function CustomToggle() {
  const [isOn, toggleIsOn] = useToggle(false);

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

结合 useEffect 实现副作用

在 toggle 状态变化时执行副作用操作，比如 API 调用或日志记录。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Toggle state changed to: ${isToggled}`);
  }, [isToggled]);

  return (
    <button onClick={() => setIsToggled(!isToggled)}>
      {isToggled ? 'Enabled' : 'Disabled'}
    </button>
  );
}

使用 useReducer 管理复杂状态

对于更复杂的 toggle 逻辑，可以使用 useReducer 替代 useState。

import React, { useReducer } from 'react';

function toggleReducer(state, action) {
  switch (action.type) {
    case 'TOGGLE':
      return !state;
    case 'RESET':
      return false;
    default:
      return state;
  }
}

function AdvancedToggle() {
  const [state, dispatch] = useReducer(toggleReducer, false);

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

这些方法涵盖了从基础到高级的 React toggle 实现方式，可以根据具体需求选择合适的方法。