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




相关推荐
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript