如何为Ant Design的Message组件添加onClick点击事件？

你的问题出在message.error的参数传递方式不对，Ant Design的Message全局方法（message.error/success等）的第二个参数是配置对象，而非单独的duration和回调函数。正确的写法是把duration和onClick都放在同一个配置对象里。

另外，要实现点击消息立即关闭，最直接的方式是调用Message返回的关闭函数，而不是通过修改state的timer值（当然后者也能生效，但前者更简洁）。

方案1：直接调用关闭函数（推荐） #

import { message } from 'antd';
import { useState } from 'react';

// 组件内代码
const [msgTimer, setMsgTimer] = useState(5);

// 调用message.error时接收返回的关闭函数
const closeErrorMessage = message.error({
  content: 'some error msg',
  duration: msgTimer,
  onClick: () => {
    // 点击消息时直接调用关闭函数
    closeErrorMessage();
  }
});

方案2：通过修改state控制关闭 #

如果你坚持要用修改msgTimer的方式，可以结合useEffect监听timer的变化，当timer变为0时手动关闭消息：

import { message } from 'antd';
import { useState, useEffect, useRef } from 'react';

// 组件内代码
const [msgTimer, setMsgTimer] = useState(5);
const msgInstanceRef = useRef(null);

useEffect(() => {
  if (msgTimer === 0 && msgInstanceRef.current) {
    msgInstanceRef.current();
    // 重置timer，避免重复触发
    setMsgTimer(5);
  }
}, [msgTimer]);

// 初始化消息
msgInstanceRef.current = message.error({
  content: 'some error msg',
  duration: msgTimer,
  onClick: () => {
    setMsgTimer(0);
  }
});

为什么你之前的写法无效？ #

你之前的代码message.error('some error msg', msgTimer, onClick={()=>setMsgTimer(0)})错误地将duration作为第二个参数，onClick作为第三个参数，但message.error只接受两个参数：第一个是消息内容（字符串或ReactNode），第二个是配置对象。所以第三个参数会被忽略，导致onClick不生效。

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