简体中文

useBoolean

Tags:

State

这个 Hook 自 v1.3.0 版本起可用。

一个用于帮助管理 boolean 状态的 React Hook。

提示

如果你需要管理多个值的循环交替状态（如切换多语言、多主题等），建议使用 useCircularList。

场景

控制元素显隐场景： 用于控制页面元素如对话框、下拉菜单的显示和隐藏
表单开关输入场景： 管理表单中开关类型输入（如复选框）的状态
...

演示

源码

Boolean Value:

true

Circular List:

A, B, C, D, E, F

Circular Value:

用法

const [bool, actions] = useBoolean(false);

actions.toggle();
actions.setTrue();
actions.setFalse();

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const [bool, actions] = useBoolean(initialBool)

初始布尔值 InitialBool

表示初始状态的 boolean 值。

返回值

export type UseBooleanActions = {
  /**
   * 将布尔状态设置为 `true`。
   */
  setTrue: () => void
  /**
   * 将布尔状态设置为 `false`。
   */
  setFalse: () => void
  /**
   * 将布尔状态设置为给定的值。
   */
  setState: ReactSetState<boolean>
  /**
   * 切换布尔状态。
   */
  toggle: () => void
}

export type UseBooleanReturns = readonly [value: boolean, UseBooleanActions]

ON THIS PAGE

#useBoolean

#场景

#演示

#用法

#源码

#API

#初始布尔值 InitialBool

#返回值

useBoolean

场景

演示

用法

源码

API

初始布尔值 InitialBool

返回值