---
title: "useToggle 用法与示例"
description: "优雅管理 `Boolean` 值。"
canonical: https://reactuse.com/zh-Hans/state/usetoggle/
---

# useToggle

优雅管理 `Boolean` 值。

`useToggle` 管理一个布尔状态值，附带便捷的切换函数。它返回一个包含当前布尔值和切换函数的元组。无参调用 `toggle()` 翻转值；调用 `toggle(true)` 或 `toggle(false)` 直接设置。这为最常见的布尔状态模式提供了最小化的 API。

### 使用场景

- 切换模态框、下拉菜单、侧边栏或手风琴等 UI 元素
- 管理功能、深色模式或设置的开/关状态
- 使用简单的元组 API 控制组件的显示/隐藏可见性

### 注意事项

- **SSR 安全**：在服务端和客户端的行为完全相同，因为它仅使用 React 状态。
- **灵活切换**：切换函数接受可选参数。传入布尔值设置特定值，或无参调用翻转。
- 参见 `useBoolean` 了解带有明确 `setTrue`/`setFalse` 辅助方法的更丰富 API，以及 `useDisclosure` 了解带回调的模态框风格打开/关闭模式。

## Usage

```tsx live

function Demo() {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on ? "开启" : "关闭"}</div>
      <button onClick={toggle}>切换</button>
      <button onClick={() => toggle(true)}>设为开启</button>
      <button onClick={() => toggle(false)}>设为关闭</button>
    </div>
  );
};
```

%%API%%