react hooks 使用antd的modal

当使用 React Hooks 和 Ant Design 的 Modal 组件时，你可以使用 useState hook 来控制 Modal 组件的显示和隐藏状态，以及使用 useEffect hook 来监听 Modal 组件的显示和隐藏状态，并在 Modal 显示时执行一些逻辑。

下面是一个示例代码：

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

const ExampleModal = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    console.log('Modal is', visible ? 'visible' : 'hidden');
  }, [visible]);

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

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

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
      </Modal>
    </div>
  );
};

export default ExampleModal;

在上面的示例代码中，我们使用 useState hook 来创建一个名为 visible 的状态变量，它用于控制 Modal 组件的显示和隐藏状态。

我们还使用 useEffect hook 来监听 visible 变量的变化，并在 Modal 显示时打印一条日志。

最后，我们在 Modal 组件中使用 visible 变量来控制它的显示和隐藏，并在 Modal 组件的 onOk 和 onCancel 事件处理函数中更新 visible 变量的值。

希望这个示例能够帮助你使用 React Hooks 和 Ant Design 的 Modal 组件。