react 点击展开收起功能

Nicole1.

已于 2022-09-26 13:03:29 修改

阅读量1.9k

点赞数 2

文章标签： react.js 前端 javascript

于 2022-09-26 12:51:23 首次发布

本文链接：https://blog.csdn.net/m0_52743009/article/details/127050347

版权

点击展开收起功能

1.使用useToggle进行定义
useToggle用法：用于在两个状态值间切换的 Hook。
const [states, { set }] = useToggle(true)

// 判断是否下拉或收起
  const [states, { set }] = useToggle(true)

2.方法

// 展开显示全部标签
  const handlerAll = (val: boolean) => {
    set(!val)
  }

3.render渲染

<div>
   <span className="footer_open" onClick={() => handlerAll(states)}>
     {/* {state.text} */}
     {states ? '展开全部' : '收起'}
   </span>
   {states ? (
     <ArrowDown className="arrow" />
   ) : (
     <ArrowUp className="arrow" />
   )}
 </div>