React项目中Antd Modal点击按钮无法弹出问题求助

在React项目中使用Ant Design的Modal组件时，按钮可见，但点击后无任何反应，控制台也没有报错，甚至尝试官方示例代码也复现同样问题。

用户提供的代码如下：

import { Button, Modal } from 'antd';
import React, { useState } from 'react';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

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

  const handleOk = () => {
    setIsModalOpen(false);
  };

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

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

以下是几个排查和解决方向：

• 版本兼容性检查
  确认React和Antd的版本是否匹配：Antd 5.x要求React 16.8及以上版本，Antd 4.x对React版本也有对应要求。运行npm list react antd查看当前版本，若版本不兼容，升级或降级到官方文档标注的兼容版本。

• 全局样式引入验证
  Antd组件依赖全局样式文件，未正确引入会导致组件功能异常。在项目入口文件（如index.js）中添加样式引入：

  // Antd 5.x 用这个
  import 'antd/dist/reset.css';
  // Antd 4.x 用这个
  import 'antd/dist/antd.css';
  

• 事件触发与状态更新验证
  在showModal函数中添加日志，确认点击事件是否被触发：

  const showModal = () => {
    console.log('点击了Open Modal按钮');
    setIsModalOpen(true);
  };
  

  如果控制台没有输出日志，说明按钮可能被其他元素遮挡（比如z-index更高的透明元素），检查页面布局是否有元素覆盖按钮。

• 样式冲突排查
  检查是否有自定义CSS或第三方样式库（如Tailwind）设置了pointer-events: none，导致按钮或Modal无法响应点击。临时移除自定义样式或禁用第三方样式库，测试是否恢复正常。

• React Strict Mode影响
  若项目启用了React Strict Mode，部分场景下会导致状态更新异常。可以暂时移除入口文件中的<React.StrictMode>标签，重新启动项目测试。

• 缓存清理与重建
  依赖缓存或构建缓存可能导致旧代码残留，运行npm ci清理并重新安装依赖，再执行npm run start重启项目。

内容的提问来源于stack exchange，提问作者Siddharth Joshi