问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用antd/Modal但是不弹窗，请问是否有哪位大佬知道原因呢？

头像
klim
    48418109

    使用antd/Modal
    但是不弹窗，请问是否有哪位大佬知道原因呢？

    
import './App.css'
import { Card, Modal, Space,  } from 'antd'

function App() {
  
  const [modal, contextHolder] = Modal.useModal();

  const config = {
    title: 'Use Hook!',
    content: (
      <div>1w2e3rreqdw</div>
    ),
  };

  return (
    <>
     <button onClick={ () => {
      console.log('点击按钮')
      modal.info(config)
     }}>按钮</button>
    </>
  )
}

export default App
    前端antd
    阅读 341
    avatarAI BotBETA
    ### 可能的原因及解决方案

1. **Modal 使用方式不正确**：
   - `Modal.useModal()` 返回的是一个包含 `showModal`, `destroy`, `update` 等方法的对象，而不是直接包含 `info` 方法的对象。`info` 方法是 `Modal` 组件自身的静态方法，不是通过 `useModal` 钩子返回的方法。

2. **修改代码以正确使用 Modal**：
   - 如果你想使用 `Modal.info`，可以直接调用它，而不需要通过 `useModal`。
   - 或者，如果你想使用 `useModal`，应该使用 `showModal` 方法来显示模态框，并传递配置对象。

### 修正后的代码

如果你希望继续使用 `useModal`：

    import './App.css';
    import { Card, Modal, Space, Button } from 'antd';

    function App() {
    const [modal] = Modal.useModal();

    const openModal = () => {

    modal.show({
  title: 'Use Hook!',
  content: <div>1w2e3rreqdw</div>,
  onOk: () => {
    console.log('OK');
  },
  onCancel: () => {
    console.log('Cancel');
  },
});

    };

    return (

    <>
  <Button type="primary" onClick={openModal}>
    打开模态框
  </Button>
</>

    );
    }

    export default App;

    
如果你希望使用 `Modal.info`：

    import './App.css';
    import { Card, Modal, Space, Button } from 'antd';

    function App() {
    const openInfoModal = () => {

    Modal.info({
  title: 'Info Modal',
  content: <div>1w2e3rreqdw</div>,
  onOk() {
    console.log('Info Modal OK');
  },
});

    };

    return (

    <>
  <Button type="primary" onClick={openInfoModal}>
    显示信息模态框
  </Button>
</>

    );
    }

    export default App;

    
确保你根据实际需求选择正确的使用方式。如果仍然遇到问题，请检查是否有其他代码或样式影响了模态框的显示。
    1 个回答
    得票最新
    头像头饰
    Seven
      1.3k127
      ✓ 已被采纳

      大概看了一下你的代码，你已经定义了 const [modal, contextHolder] = Modal.useModal();，但没有在 JSX 中使用 contextHolder。需要在返回的 JSX 中包含 {contextHolder}，这样 Modal 才能正常工作。

      import './App.css';
import { Modal } from 'antd';

function App() {
  const [modal, contextHolder] = Modal.useModal();

  const config = {
    title: 'Use Hook!',
    content: (
      <div>1w2e3rreqdw</div>
    ),
  };

  return (
    <>
      <button onClick={() => {
        console.log('点击按钮');
        modal.info(config);
      }}>按钮</button>
      {contextHolder}
    </>
  );
}

export default App;
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏