利用抽屉和对话框，让项目新增修改复用爽上天！

前端

2022-12-05 15:07:24

复用组件：表格新增和修改功能的利器

作为前端开发人员，在表格中实现新增和修改功能时，我们经常会陷入重复繁琐的编写代码的困境。传统的方式是为每个功能创建一个单独的组件，这无疑增加了代码量和维护成本。

然而，复用组件的出现带来了转机。复用组件是指将具有相同或相似功能的组件进行抽象和封装，使其可以被多个地方重复使用。在表格中实现新增和修改功能时，我们可以将这两个功能抽象成一个公共的组件，然后在需要的时候直接调用即可。

抽屉和对话框：复用的得力助手

抽屉和对话框是两种非常适合用作复用组件的元素。

抽屉（Drawer）： 抽屉组件通常从屏幕侧面滑入，为用户提供了一个临时的工作空间。它可以用来存放表单、过滤器或其他需要临时显示的内容。
对话框（Dialog）： 对话框组件是一个模态窗口，它会覆盖整个屏幕，并阻止用户与其他元素交互。对话框通常用来显示重要的信息、确认操作或收集用户输入。

抽屉和对话框都非常适合用作表格新增和修改功能的复用组件。它们可以轻松地从表格中打开，并在用户完成操作后自动关闭，非常方便。

如何将新增和修改功能复用成抽屉或对话框？

现在，让我们来具体介绍一下如何将新增和修改功能复用成抽屉或对话框。

1. 创建公共组件

首先，我们需要创建一个公共组件，来抽象和封装新增和修改功能。这个组件可以是一个函数组件或类组件，具体取决于你的个人喜好和项目需求。

在公共组件中，我们需要定义以下内容：

表单组件： 用来收集用户输入
提交按钮： 用来提交表单
取消按钮： 用来取消操作

// 示例函数组件
const AddEditModal = ({ isOpen, onClose, onSubmit, initialValues }) => {
  const [formData, setFormData] = useState(initialValues);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
    onClose();
  };

  const handleCancel = () => {
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <Form onSubmit={handleSubmit}>
        {/* 表单组件代码 */}
        {/* 提交按钮代码 */}
        {/* 取消按钮代码 */}
      </Form>
    </Modal>
  );
};