指南
Hooks
指南
Hooks

useToggle

在两个值之间切换的 Hook，比 useBoolean 更加灵活，可以接受任意类型的值。

基础用法

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

function Demo() {
    const [state, toggle, set] = useToggle()

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

在两个自定义值之间切换

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

function Demo() {
    const [state, toggle, set] = useToggle('开', '关')

    return (
        <div>
            <p>当前状态: {state}</p>
            <button onClick={toggle}>切换</button>
            <button onClick={() => set('开')}>设置为「开」</button>
            <button onClick={() => set('关')}>设置为「关」</button>
        </div>
    )
}

API

const [state, toggle, set] = useToggle<T, U>(
  defaultValue?: T,
  reverseValue?: U
);

Params

参数 说明 类型 默认值
defaultValue 可选的默认值 T false
reverseValue 可选的切换值 U !defaultValue

Result

参数 说明 类型
state 当前状态 T | U
toggle 切换状态 () => void
set 设置状态为指定值 (value: T | U) => void

进阶用法

多状态切换

import { useToggle } from 'miaoma-rhooks'
import React, { useState } from 'react'

function MultiStateToggle() {
    const states = ['待办', '进行中', '已完成', '已取消']
    const [currentIndex, setCurrentIndex] = useState(0)
    const [state, toggle] = useToggle(states[0], states[1])

    const handleClick = () => {
        const nextIndex = (currentIndex + 1) % states.length
        setCurrentIndex(nextIndex)
        toggle()
        // 如果需要循环切换多个状态，可以使用 set 方法
        // set(states[nextIndex]);
    }

    return (
        <div>
            <p>当前状态: {state}</p>
            <button onClick={handleClick}>切换到下一个状态</button>
        </div>
    )
}

主题切换

import { useToggle } from 'miaoma-rhooks'
import React, { useEffect } from 'react'

function ThemeToggle() {
    const [theme, toggleTheme] = useToggle('light', 'dark')

    // 应用主题到 body 元素
    useEffect(() => {
        document.body.setAttribute('data-theme', theme)
        return () => {
            document.body.removeAttribute('data-theme')
        }
    }, [theme])

    return (
        <div>
            <p>当前主题: {theme}</p>
            <button onClick={toggleTheme}>切换到{theme === 'light' ? '暗色' : '亮色'}主题</button>
        </div>
    )
}

语言切换

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

function LanguageToggle() {
    const [language, toggleLanguage, setLanguage] = useToggle('中文', 'English')

    return (
        <div>
            <p>当前语言: {language}</p>
            <button onClick={toggleLanguage}>切换语言</button>
            <div>
                <button onClick={() => setLanguage('中文')}>设置为中文</button>
                <button onClick={() => setLanguage('English')}>设置为英文</button>
            </div>
        </div>
    )
}
ON THIS PAGE