Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to add onClick event on antd message?

I have following question and I hope you can help me.

I have this code:

 const [msgTimer, setMsgTimer] = useState(5);

 message.error('some error msg', msgTimer);

In antd documentation message has onClick property. So how can I add that onClick event to my message?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I tried following but it not working.

 message.error('some error msg', msgTimer, onClick={()=>setMsgTimer(0)});

With that onClick I want immediately close that message.

Please help me to resolve this problem.

>Solution :

What you want to achieve is possible, but you’ll need to use a different syntax, that allows you to set a key for a message.

const messageKey = 'some unique message key';
message.error({
  content: 'some error msg',
  duration: 5,
  key: messageKey,
  onClick: () => message.destroy(messageKey)
});

This way, you’ll assign a unique key to the message, that you can later use in your onClick handler to remove that message.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading