Ant Design 与 Umi.js 集成中常见问题的解决方案

在使用 Ant Design 和 Umi.js 进行开发时，我们可能会遇到一些棘手的问题。本文将深入探讨其中一些最常见的困难并提供切实可行的解决方案。通过解决这些问题，我们可以大大提高开发效率并确保项目的顺利进行。

1. 文件路径未找到

当尝试导入 Ant Design 组件时，您可能会遇到 "filePath not found" 错误。这是因为 Umi.js 采用了模块化配置，您需要显式地配置 Ant Design 的路径。要解决此问题，请在 Umi.js 的 .umirc.js 配置文件中添加以下内容：

import { defineConfig } from 'umi';

export default defineConfig({
  theme: {
    '@primary-color': '#1890ff',
  },
  alias: {
    'antd': '@ant-design/react',
  },
});

2. Ant Design 中 Modal 与 Form 的复合使用

在使用 Modal 和 Form 时，您可能会遇到一些挑战。例如，当您尝试在 Modal 中提交表单时，表单可能会出现校验错误，但 Modal 不会关闭。这是因为 Form 组件的默认行为是阻止表单提交。要解决此问题，您可以使用 onFinish 属性来处理表单提交并手动关闭 Modal：

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

const MyModal = () => {
  const onFinish = (values) => {
    // 处理表单提交逻辑
    console.log('Success:', values);
    setVisible(false); // 关闭 Modal
  };

  return (
    <Modal visible={visible} onOk={onFinish} onCancel={() => setVisible(false)}>
      <Form onFinish={onFinish}>
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

3. 预设或清空 Ant Design 中的日期选择器

在使用日期选择器组件时，您可能希望预设或清空日期。要预设日期，可以使用 defaultValue 属性：

import { DatePicker } from 'antd';

const MyDatePicker = () => {
  return (
    <DatePicker defaultValue={new Date('2023-03-08')} />
  );
};

要清空日期，可以使用 clear() 方法：

import { DatePicker } from 'antd';

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleClear = () => {
    setSelectedDate(null);
  };

  return (
    <DatePicker value={selectedDate} onChange={setSelectedDate} />
  );
};