要实现点击 Antd Modal 的遮罩层不做任何操作,你可以使用 maskClosable
属性,将其设置为 false
。
以下是一个示例代码:
import React, { useState } from 'react';
import { Button, Modal } from 'antd';
const ExampleModal = () => {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
Modal Content
Clicking the mask layer will not close the modal.
);
};
export default ExampleModal;
在上述代码中,我们定义了一个状态 visible
来控制 Modal 的显示与隐藏。当点击按钮时,调用 showModal
方法来显示 Modal。在 Modal 组件中,设置 maskClosable={false}
来禁止点击遮罩层关闭 Modal。点击 Modal 的确定按钮或取消按钮时,分别调用 handleOk
和 handleCancel
方法来关闭 Modal。
这样,当用户点击 Modal 的遮罩层时,不会有任何操作发生。