• antd+ Umi使用中出现的问题集合（一）

    一、filePath not found

    在这里插入图片描述
    【解决】
    https://github.com/ant-design/ant-design-pro/discussions/9362
    这个方案救了我
    在这里插入图片描述

    二、antd中Modal结合form的复合使用

    【解决】
    https://juejin.cn/post/6861041612484460558
    https://www.jianshu.com/p/d70bbe4cee38
    https://blog.csdn.net/zw686668/article/details/118372309

    import { Form, Input, Modal, message, Upload, Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';

export const UpgradeForm = (params: any) => {
  const { cancelModal, okModal } = params;
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue({
      name: '003',
      production: '产品1',
      version: '003',
    });
  }, []);

  const onFinish = async (values: any) => {};

  const props: UploadProps = {
    name: 'file',
    accept: '.csv',
    showUploadList: false,
    maxCount: 1,
    action: '',
    headers: {
      authorization: 'authorization-text',
    },
    beforeUpload(file) {
      parseCSV(file, (content) => {
        console.log(content, 'content');
        message.success('文件添加成功');
      });
    },
  };

  const getCSVTemplate = () => {
    //列标题，逗号隔开，每个逗号表示隔开一个单元格
    let str = `设备名\n`;
    //增加\t为了不让表格显示科学计数法或其他格式
    str += `device_name\t\n`;
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);

    let link = document.createElement('a');
    link.href = uri;
    link.download = '设备模板.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const parseCSV = (file: any, callback: (text: string) => void) => {
    const reader = new FileReader();
    reader.onload = () => callback(reader.result as string);
    reader.readAsText(file);
  };

  return (
    <Modal
      title="升级"
      visible={true}
      onCancel={() => cancelModal('')}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            //检验成功时；
            form.resetFields();
            form.setFieldsValue(values); //例：{tagName:'888'}
            okModal(values);
          })
          .catch((info) => {
            //检验失败时；
            console.log('校验失败:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="horizontal"
        name="nest-messages"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        onFinish={onFinish}
      >
        <Form.Item name="name" label="名称" rules={[]}>
          <Input disabled />
        </Form.Item>
        <Form.Item name="production" label="所属产品" rules={[]}>
          <Input disabled />
        </Form.Item>
        <Form.Item name="version" label="版本号" rules={[]}>
          <Input disabled />
        </Form.Item>
        <Form.Item label="指定设备">
          <Space
            style={{
              width: '600px',
            }}
          >
            <Form.Item
              name="device"
              rules={[
                {
                  required: true,
                  message: '必选',
                },
              ]}
            >
              <Upload {...props}>
                <Button icon={<PlusOutlined />}>点击选择文件</Button>
              </Upload>
            </Form.Item>
            <a onClick={getCSVTemplate}>下载模板</a>
          </Space>
        </Form.Item>
        <Form.Item
          style={{
            paddingLeft: '16%',
          }}
        >
          上传文件中请录入准确的DeviceName，仅支持csv格式。
        </Form.Item>
      </Form>
    </Modal>
  );
};


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130

    调用该弹出框表单

    	{type === 'upgrade' && (
        <UpgradeForm cancelModal={() => setType('')} okModal=		{onAddUpgrade} />
      )}

    • 1
    • 2
    • 3

    三、如何预设或清空antd中的日期选择器DatePicker

    这里有提到几种解决方案：
    https://www.cnblogs.com/steamed-twisted-roll/p/14809408.html
    https://www.programminghunter.com/article/92222027759/

    给rangePicker控件添加key属性，点击重置时，修改key的值，如new Date()，相当于重新渲染控件

    但这些方案对我无效😭，

    【解决】
    之前试了setDateTime([null, null]);无效
    最终解决方案，将日期控制器放到中，通过form.setFiledsValue({
    date:‘’
    })
    或form.resetFileds()
    来实现清空

              <Form
            layout="inline"
            form={form}
            onFinish={onFinish}
            hideRequiredMark
          >
            <Form.Item name="dateTime">
              <DateRangePicker
                style={{ width: '500px' }}
                getPopupContainer={(trigger: any) => trigger.parentElement}
                value={dateTime}
                onChange={(dates: any) => {
                  setDateTime(dates);
                }}
              />
            </Form.Item>
            <Form.Item>
              <Button
                onClick={async (e) => {
                  form.resetFields();
                }}
                icon={<RetweetOutlined />}
              />
			</Form.Item>
     </Form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    【小插曲】
    其实之前在看官网时还发现了一种解决方案，就是直接设置moment()来修改预设时间
    但由于项目需要更换为dayjs库，所以我尝试了将moment替换为dayjs并进行时间清空操作，感兴趣的小伙伴可以看一下
    https://ant.design/docs/react/replace-moment-cn

    在src/components下
    在这里插入图片描述
    在这里插入图片描述

    使用
const RangePicker: any = DatePicker.RangePicker;
const [dateTime, setDateTime] = useState([null, null]);

<RangePicker
	style={{ width: '100%' }}
	getPopupContainer={(trigger: any) => trigger.parentElement}
	value={dateTime}
	onChange={(dates: any) => {
		setDateTime(dates);
}}
/>
清空日期选择器
setDateTime([]);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    https://ant.design/docs/react/replace-moment-cn

    补充========================

    小插曲方案成功了几次，后面又失效了😭，这里占坑以后再来看一下，所以大家还是直接上form.resetFields()吧，这个方案比较有效

    四、修改主题样式

    在这里插入图片描述
    搭配app.tsx使用
    在这里插入图片描述
    实在不行就强刷，或者把src下的.umi文件删除再重新运行
    在这里插入图片描述

    五、form表单的动态校验

    在这里插入图片描述
    选择文本时数据不能为空
    在这里插入图片描述
    选择十六进制时需要设置正确的格式
    在这里插入图片描述

    六、antd 在表格中使用气泡确认框 （循环展示了多个气泡卡片）

    在这里插入图片描述
    【解决】
    在这里插入图片描述
    在这里插入图片描述
    参考：
    https://its401.com/article/sw_onload/106870313
    https://www.csdn.net/tags/OtTaQg3sNTI3NDAtYmxvZwO0O0OO0O0O.html

  • 相关阅读:
    MySQL空间函数知识点总结
    Linux 配置mail 发送qq邮箱
    【源码解读(一)】EFCORE源码解读之创建DBContext查询拦截
    xlwings 禁止提示 禁止 更新链接
    【SpringCloud】LoadBalance负载均衡服务调用快速入门
    Python使用MySQL，无记录则插入，有记录则更新 - ON DUPLICATE KEY UPDATE
    如何购买阿里云香港服务器？又有什么什么好处呢？
    如何阻止事件冒泡和默认事件
    PTA 7-185 组个最小数
    建模杂谈系列145 Mysql To Mongo By Python Processing
  • 原文地址：https://blog.csdn.net/weixin_44258574/article/details/126179579