Node + React 实战：从零实现记账本（十三）——新增账单弹窗封装

前言

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

新增账单弹窗封装

在这一章中，我们将对新增账单弹窗组件进行封装，使其成为一个可重用的组件。这将使我们能够在应用程序的其他地方轻松地使用该组件，而无需重复编写代码。

首先，我们需要创建一个新的文件，将其命名为AddBillModal.js。然后，我们将把新增账单弹窗组件的代码从App.js文件中复制到AddBillModal.js文件中。

import React, { useState } from "react";
import { Modal, Button, Form } from "react-bootstrap";

const AddBillModal = (props) => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        新增账单
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>新增账单</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>账单名称</Form.Label>
              <Form.Control type="text" placeholder="请输入账单名称" />
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
              <Form.Label>账单金额</Form.Label>
              <Form.Control type="number" placeholder="请输入账单金额" />
            </Form.Group>

            <Form.Group controlId="formBasicCheckbox">
              <Form.Check type="checkbox" label="是否已支付" />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            关闭
          </Button>
          <Button variant="primary" onClick={handleClose}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default AddBillModal;

接下来，我们需要在App.js文件中导入AddBillModal组件。

import AddBillModal from "./components/AddBillModal";

最后，我们需要在App.js文件中使用AddBillModal组件。

const App = () => {
  return (
    <div className="container">
      <AddBillModal />

      {/* 其他组件 */}
    </div>
  );
};

现在，我们已经将新增账单弹窗组件封装成一个可重用的组件。我们可以很容易地将该组件用于应用程序的其他地方，而无需重复编写代码。

结语

在本文中，我们学习了如何对新增账单弹窗组件进行封装，使其成为一个可重用的组件。这使我们能够在应用程序的其他地方轻松地使用该组件，而无需重复编写代码。这有助于提高代码的可维护性和可扩展性。