当前位置：首页 > React

react如何实现toggle

2026-02-11 22:20:19React

实现 Toggle 功能的几种方法

在 React 中实现 Toggle（切换）功能可以通过多种方式完成，以下是常见的几种方法：

使用 useState Hook

通过 useState 管理 toggle 状态是最简单直接的方式：

import React, { useState } from 'react';

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

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

使用 useReducer Hook

对于更复杂的 toggle 逻辑，可以使用 useReducer：

import React, { useReducer } from 'react';

function toggleReducer(state) {
  return !state;
}

function ToggleButton() {
  const [isToggled, toggle] = useReducer(toggleReducer, false);

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

自定义 Hook

可以创建可复用的 useToggle 自定义 Hook：

import { useState } from 'react';

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

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

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

类组件实现

使用传统的类组件方式：

import React from 'react';

class ToggleButton extends React.Component {
  state = { isToggled: false };

  handleToggle = () => {
    this.setState(prevState => ({
      isToggled: !prevState.isToggled
    }));
  };

  render() {
    return (
      <button onClick={this.handleToggle}>
        {this.state.isToggled ? 'ON' : 'OFF'}
      </button>
    );
  }
}

带有回调的 Toggle

当需要在 toggle 后执行额外操作时：

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

  const handleToggle = () => {
    const newValue = !isToggled;
    setIsToggled(newValue);
    console.log(`Toggle state changed to: ${newValue}`);
  };

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

受控组件模式

当 toggle 状态由父组件控制时：

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

  return (
    <ChildToggle 
      isToggled={isToggled} 
      onToggle={() => setIsToggled(!isToggled)} 
    />
  );
}

function ChildToggle({ isToggled, onToggle }) {
  return (
    <button onClick={onToggle}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  );
}

样式切换实现

结合 CSS 类名实现视觉切换：

react如何实现toggle

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

  return (
    <button 
      className={`toggle-btn ${isActive ? 'active' : ''}`}
      onClick={() => setIsActive(!isActive)}
    >
      Click Me
    </button>
  );
}

以上方法涵盖了 React 中实现 toggle 功能的主要方式，可以根据具体需求选择最适合的方案。