跳到主要内容

useBoolean

管理布尔值的 React hook。

Usage​

实时编辑器
function Demo() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false);

  return (
    <div>
      <p>当前值: <strong>{value ? '真' : '假'}</strong></p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => setValue(true)}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          设置为真
        </button>
        <button
          type="button"
          onClick={() => setValue(false)}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          设置为假
        </button>
        <button
          type="button"
          onClick={setTrue}
          style={{ marginRight: 8 }}
          disabled={value}
        >
          setTrue()
        </button>
        <button
          type="button"
          onClick={setFalse}
          style={{ marginRight: 8 }}
          disabled={!value}
        >
          setFalse()
        </button>
        <button
          type="button"
          onClick={toggle}
          style={{ marginRight: 8 }}
        >
          切换
        </button>
      </div>
      <div>
        <p>状态: {value ? '✅ 启用' : '❌ 禁用'}</p>
      </div>
    </div>
  );
};
结果
Loading...

API​

useBoolean​

Returns​

{ readonly value: boolean; readonly setValue: (value: boolean) => void; readonly setTrue: () => void; readonly setFalse: () => void; readonly toggle: () => void; }: 包含以下属性的对象：

  • value: 当前的布尔值。
  • setValue: 直接设置布尔值的函数。
  • setTrue: 将值设置为 true 的函数。
  • setFalse: 将值设置为 false 的函数。
  • toggle: 切换布尔值的函数。

Arguments​

参数名描述类型默认值
initialValue初始值，默认为 falseboolean | undefined-