指南
Hooks
指南
Hooks

useBoolean

管理布尔状态的 Hook，提供了更加语义化的操作方法。

基础用法

import { useBoolean } from 'miaoma-rhooks'
import React from 'react'

function Demo() {
    const [state, { toggle, setTrue, setFalse, set }] = useBoolean(false)

    return (
        <div>
            <p>当前状态: {String(state)}</p>
            <div>
                <button onClick={toggle}>切换</button>
                <button onClick={setTrue}>设为 true</button>
                <button onClick={setFalse}>设为 false</button>
                <button onClick={() => set(true)}>设置为 true</button>
                <button onClick={() => set(false)}>设置为 false</button>
            </div>
        </div>
    )
}

API

const [state, { toggle, setTrue, setFalse, set }] = useBoolean(
  defaultValue?: boolean
);

Params

参数 说明 类型 默认值
defaultValue 可选的默认值 boolean false

Result

参数 说明 类型
state 布尔状态 boolean
actions 操作集合 BooleanActions

Actions

参数 说明 类型
toggle 切换状态 () => void
setTrue 设置状态为 true () => void
setFalse 设置状态为 false () => void
set 设置状态为指定值 (value: boolean) => void

进阶用法

在表单中使用

import { useBoolean } from 'miaoma-rhooks'
import React from 'react'

function LoginForm() {
    const [rememberMe, { toggle }] = useBoolean(false)
    const [showPassword, { toggle: togglePassword }] = useBoolean(false)

    return (
        <form>
            <div>
                <input type="text" placeholder="用户名" />
            </div>
            <div>
                <input type={showPassword ? 'text' : 'password'} placeholder="密码" />
                <button type="button" onClick={togglePassword}>
                    {showPassword ? '隐藏密码' : '显示密码'}
                </button>
            </div>
            <div>
                <label>
                    <input type="checkbox" checked={rememberMe} onChange={toggle} />
                    记住我
                </label>
            </div>
            <button type="submit">登录</button>
        </form>
    )
}

控制模态框

import { useBoolean } from 'miaoma-rhooks'
import React from 'react'

function ModalExample() {
    const [visible, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false)

    return (
        <div>
            <button onClick={showModal}>打开模态框</button>
            {visible && (
                <div className="modal">
                    <div className="modal-content">
                        <h2>模态框标题</h2>
                        <p>这是一个使用 useBoolean 控制的模态框示例。</p>
                        <button onClick={hideModal}>关闭</button>
                    </div>
                </div>
            )}
        </div>
    )
}
ON THIS PAGE