ahook-状态切换hooks-useToggle

告别useState去设置状态

原来写法

javascript 复制代码
import React from 'react';
import { useState } from 'ahooks';

export default () => {
  const [state, setState] = useState (false);

  return (
    <div>
      <p>Effects:{`${state}`}</p>
        <button type="button" onClick={()=> setState(!state)}>
          State
        </button>
    </div>
  );
};

useToggle

用于在两个状态值间切换的 Hook

代码演示

javascript 复制代码
import React from 'react';
import { useToggle } from 'ahooks';

export default () => {
  const [state, { toggle, setLeft, setRight }] = useToggle();

  return (
    <div>
      <p>Effects:{`${state}`}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Toggle False
        </button>
        <button type="button" onClick={setRight}>
          Toggle True
        </button>
      </p>
    </div>
  );
};

其中:
state: 表示状态值
toggle, setLeft, setRight: 分别表示切换状态值的方法

useToggle:hooks,也会有默认值或者两个值进行切换

javascript 复制代码
import React from 'react';
import { useToggle } from 'ahooks';

export default () => {
  const [state, { toggle, set, setLeft, setRight }] = useToggle('Hello', 'World');

  return (
    <div>
      <p>Effects:{state}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={() => set('Hello')} style={{ margin: '0 8px' }}>
          Set Hello
        </button>
        <button type="button" onClick={() => set('World')}>
          Set World
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Set Left
        </button>
        <button type="button" onClick={setRight}>
          Set Right
        </button>
      </p>
    </div>
  );
};




相关推荐
专注VB编程开发20年3 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
PH_modest6 分钟前
【Qt跬步积累】—— 初识Qt
开发语言·qt
IT_陈寒9 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku16 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing21 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042722 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说25 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567030 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
怀旧,34 分钟前
【C++】18. 红⿊树实现
开发语言·c++
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端