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>
  );
};

結果

當前值: 假

狀態: ❌ 禁用

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	初始值，默认为 false	boolean | undefined	-