高效省力的新增商品弹框组件构建指南

2024-01-12 18:06:34

在现代电子商务网站中，商品管理是必不可少的。为了提升管理员工作效率，新增商品弹框组件应运而生。它允许管理员在不跳转到新页面或打断当前工作流程的情况下添加新商品。本文将详细介绍如何使用 Umi、Ant Design 和 TypeScript 构建一个功能强大的新增商品弹框组件。

技术栈

Umi：一款高性能的 React 应用框架
Ant Design：一套企业级的 React UI 组件库
TypeScript：一种强类型的 JavaScript 超集

文件目录

- const.ts (常量文件)
- index.tsx (入口文件)
- addShop.tsx (新增商品弹框组件)

代码解析

const.ts

常量文件用于定义通用常量，例如模态窗口标题和按钮文本。

export const modalTitle = '新增商品';
export const submitButtonText = '提交';

index.tsx

入口文件负责渲染新增商品弹框组件。

import { Button, Modal } from 'antd';
import AddShop from './addShop';

const App = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleOk = () => {
    // 提交表单
    setVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        新增商品
      </Button>
      <Modal
        title={modalTitle}
        visible={visible}
        onCancel={handleCancel}
        onOk={handleOk}
      >
        <AddShop />
      </Modal>
    </div>
  );
};

export default App;

addShop.tsx

新增商品弹框组件包含表单字段和提交按钮。

import { Form, Input, Button } from 'antd';

const AddShop = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    // 处理提交逻辑
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
    >
      <Form.Item
        label="商品名称"
        name="name"
        rules={[{ required: true, message: '请输入商品名称' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="商品价格"
        name="price"
        rules={[{ required: true, message: '请输入商品价格' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          {submitButtonText}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default AddShop;