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>
  );
};

调用该弹出框表单

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

三、如何预设或清空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>

【小插曲】
其实之前在看官网时还发现了一种解决方案，就是直接设置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([]);

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

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

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

四、修改主题样式

搭配app.tsx使用

实在不行就强刷，或者把src下的.umi文件删除再重新运行

五、form表单的动态校验

选择文本时数据不能为空

选择十六进制时需要设置正确的格式

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

【解决】

七、antd实现table中点击具体某一列才展示弹窗

参考：
https://its401.com/article/sw_onload/106870313
https://www.csdn.net/tags/OtTaQg3sNTI3NDAtYmxvZwO0O0OO0O0O.html
https://blog.csdn.net/zuibiande/article/details/125781348