ant design 中 message.open 多次触发怎么回事
时间: 2023-10-12 14:04:37 浏览: 48
Ant Design 中的 `message` 组件提供了 `open` 方法,可以手动触发显示消息。如果在多个事件中同时调用 `message.open` 方法,可能会导致消息重复显示的问题。
为了避免这个问题,可以在调用 `message.open` 方法之前先判断是否已经显示了消息,如果已经显示,则不再重新显示。
以下是一个示例代码:
```javascript
import { message } from 'antd';
let isMessageOpen = false;
function showMessage() {
if (!isMessageOpen) {
message.open({
content: 'This is a message',
onClose: () => {
isMessageOpen = false;
},
});
isMessageOpen = true;
}
}
// 在多个事件中同时调用 showMessage
showMessage();
```
上述代码中,使用一个布尔变量 `isMessageOpen` 来记录消息是否已经显示。在调用 `showMessage` 方法时,先判断 `isMessageOpen` 的值,如果为 `false` 则调用 `message.open` 方法显示消息,并将 `isMessageOpen` 置为 `true`,否则不再重新显示消息。
另外,可以通过为 `message` 组件的 `duration` 属性设置为 0,来让消息一直显示,直到用户点击关闭按钮。这样可以避免在短时间内重复显示消息的问题。
```javascript
message.open({
content: 'This is a message',
duration: 0,
});
```