react + zarm 实现账单列表类型以及时间条件弹窗封装

本文链接：https://blog.csdn.net/m0_67265464/article/details/124777267

本文介绍了如何使用 React 和 Zarm 框架，详细阐述了如何封装类型条件组件和时间条件组件，并对账单列表组件进行相应改动，以实现点击触发条件弹窗的效果。通过测试，成功展示了不同筛选条件下账单列表的变化。

摘要由CSDN通过智能技术生成

需要实现的效果

点击类型，出现下面的条件弹窗

在这里插入图片描述

点击时间，出现下面的弹窗

在这里插入图片描述

实现过程

这里用到 popup 组件 https://zarm.design/#/components/popup

1.封装类型条件组件

新建 components/PopupType，在其内部新建 index.jsx 和 style.module.less 内容如下：

import React, { forwardRef, useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { Popup, Icon } from 'zarm'
import cx from 'classnames'
import { queryTypeList } from './api/index.js'

import s from './style.module.less'

// forwardRef 用于拿到父组件传入的 ref 属性，这样在父组件便能通过 ref 控制子组件。
const PopupType = forwardRef(({ onSelect }, ref) => {
  const [show, setShow] = useState(false); // 组件的显示和隐藏
  const [active, setActive] = useState('all'); // 激活的 type
  const [expense, setExpense] = useState([]); // 支出类型标签
  const [income, setIncome] = useState([]); // 收入类型标签

  useEffect(async () => {
    // 请求标签接口放在弹窗内，这个弹窗可能会被复用，所以请求如果放在外面，会造成代码冗余。
    const { data } = await queryTypeList({});
    console.log(data);
    setExpense(data.filter(i => i.type == 1))
    setIncome(data.filter(i => i.type == 2))
  }, [])

  if (ref) {
    ref.current = {
      // 外部可以通过 ref.current.show 来控制组件的显示
      show: () => {
        setShow(true)
      },
      // 外部可以通过 ref.current.close 来控制组件的显示
      close: () => {
        setShow(false)
      }
    }
  };

  // 选择类型回调
  const choseType = (item) => {
    setActive(item.id)
    setShow(false)
    // 父组件传入的 onSelect，为了获取类型
    onSelect(item)
  };

  return <Popup
    visible={show}
    direction="bottom"
    onMaskClick={() => setShow(false)}
    destroy={false}
    mountContainer={() => document.body}
  >
    <div className={s.popupType}>
      <div className={s.header}>
        请选择类型
        <Icon type="wrong" className={s.cross} onClick={() => setShow(false)} />
      </div>
      <div className={s.content}>