当前位置：首页 > React

react如何实现toggle

2026-02-26 08:16:43React

实现 Toggle 的几种方法

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

使用 useState Hook

通过 useState 来管理 toggle 的状态，适合函数组件：

import React, { useState } from 'react';

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

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

使用 useReducer Hook

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

import React, { useReducer } from 'react';

function toggleReducer(state) {
  return !state;
}

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

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

使用类组件

在类组件中，可以通过 this.state 和 this.setState 实现 toggle：

import React from 'react';

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

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

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

使用自定义 Hook

可以封装一个自定义 Hook 来复用 toggle 逻辑：

import { useState } from 'react';

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

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

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

结合 Context API

如果需要跨组件共享 toggle 状态，可以结合 Context API：

import React, { useState, useContext, createContext } from 'react';

const ToggleContext = createContext();

function ToggleProvider({ children }) {
  const [isToggled, setIsToggled] = useState(false);
  const toggle = () => setIsToggled(!isToggled);

  return (
    <ToggleContext.Provider value={{ isToggled, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
}

function ToggleButton() {
  const { isToggled, toggle } = useContext(ToggleContext);

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

function App() {
  return (
    <ToggleProvider>
      <ToggleButton />
    </ToggleProvider>
  );
}

注意事项