antd 封装表单

最新推荐文章于 2024-06-28 14:18:41 发布

在路上等

最新推荐文章于 2024-06-28 14:18:41 发布

阅读量285

点赞数

分类专栏： js练习文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/weixin_42327537/article/details/132920422

版权

js练习专栏收录该内容

11 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何利用Ant Design（antd）库封装表单组件，包括查询、弹窗和基本表单功能。首先讲解了封装过程，然后阐述如何在实际项目中应用这些组件，简化前端开发工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装表单之后查询、弹窗、表单都可以用

1.封装表单组件

import React, { useEffect } from 'react'
import { Button, Checkbox, Form, Input, Select } from 'antd';
export default function publicSe(props: any) {
  const {initialValues,type} = props;
  const [form] = Form.useForm();
  const { formConfig } = props
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const showDom = (item) => {
    const { type, placeholder, options, style, disabled } = item
    switch (type) {
      case 'input':
        return <Input placeholder

了解本专栏