Node + React 实战：从 0 到 1 实现记账本（十三）

---

theme: channing-cyan

新增账单弹窗封装

前言

回顾一下上一章的内容。无限滚动列表、弹窗组件的内部控制显隐、工具方法以及常量的提取。若是你开发项目时，在潜意识里，有对这些内容进行封装的思想，那么你已经有模块化、组件化的开发理念了。在大量的工程中得出的实践，将会根深蒂固在你的开发理念里。

之前，是对一个小组件，如时间筛选、类型筛选等小组件进行封装。本章节，好处就是你在任何地方，都能使用这个添加组件，对账单进行增加操作。

先来看看本章节要绘制的页面和逻辑：

如上图所示，本章节要实现的需求逻辑，基本上已经绘制在图中。所有的努力，都是为了凑出这几个参数：

• 账单类型
• 账单金额
• 账单日期
• 账单种类
• 备注

然后将这些数据，提交给服务端进行处理，然后存储到数据库，完事。

正文

上述需求整理清楚之后，开始本章节的制作环节。

一.弹窗组件实现

先实现点击新增按钮，调出弹窗的功能。首先，在 Home/index.jsx 文件中添加 「新增按钮」，如下所示：

jsx import CustomIcon from '@/components/CustomIcon' ... const Home = () => { ... const addToggle = () => { // do something } ... return <div className={s.home}> ... <div className={s.add} onClick={addToggle}><CustomIcon type='tianjia' /></div> </div> } 样式中，注意我给 border 设置的是 1PX，大写的单位，因为这样写的话，postcss-pxtorem 插件就不会将其转化为 rem 单位。

重启项目之后，刷新浏览器，如下所示：

根据之前实现的弹窗组件，再实现一套类似的，在弹窗内控制弹窗组件的显示隐藏，在 components 下新建 PopupAddBill 文件夹，再新建 index.jsx 和 style.module.less，代码如下：

``` // PopupAddBill/index.jsx import React, { forwardRef, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { Popup } from 'zarm';

const PopupAddBill = forwardRef((props, ref) => { const [show, setShow] = useState(false) // 内部控制弹窗显示隐藏。 // 通过 forwardRef 拿到外部传入的 ref，并添加属性，使得父组件可以通过 ref 控制子组件。 if (ref) { ref.current = { show: () => { setShow(true); }, close: () => { setShow(false); } } };

return })

export default PopupAddBill ```

写完弹窗组件，当然就得去 Home/index.jsx 中调用：

```jsx // Home/index.jsx import PopupAddBill from '@/components/PopupAddBill'

const Home = () => { ... const addRef = useRef(); // 添加账单 ref ... // 添加账单弹窗 const addToggle = () => { addRef.current && addRef.current.show() }

return

} ```