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




相关推荐
汉得数字平台4 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹10 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白5 小时前
C++11之lambda表达式与包装器
开发语言·c++
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
沐知全栈开发6 小时前
Eclipse 生成 jar 包
开发语言
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
tanyongxi667 小时前
C++ AVL树实现详解:平衡二叉搜索树的原理与代码实现
开发语言·c++
拾光拾趣录8 小时前
括号生成算法
前端·算法