Реактируйте уведомление о тосте, не закрывая кнопку «✕», нажмите ⇐ Javascript

[Anonymous]

Я строю систему уведомлений о тосте в React, которая появляется при отправке пользовательского события. Предполагается, что тост должен: < /p>
показывать сообщение при запуска < /p>
Auto-Dismiss через 3 секунды (это работает) < /p>
сразу же, когда пользователь нажимает кнопку ✕ (это не работает-тост остается видным до тех пор, пока не будет выпущено). Обработчик Onclick, и я также пытался регистрировать и очистить тайм -аут. Тем не менее, тост не исчезает, пока тайм -аут не закончится. < /P>
// App.jsx
import React, { useState, useEffect, useRef } from 'react';

function App() {
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const toastTimeoutRef = useRef(null);

useEffect(() => {
const handleShowToast = (event) => {
setToastMessage(event.detail);
setShowToast(true);

// Clear existing timeout
if (toastTimeoutRef.current) {
clearTimeout(toastTimeoutRef.current);
}

// Auto-dismiss after 3 seconds
toastTimeoutRef.current = setTimeout(() => {
setShowToast(false);
toastTimeoutRef.current = null;
}, 3000);
};

window.addEventListener('show-toast', handleShowToast);

return () => {
window.removeEventListener('show-toast', handleShowToast);
if (toastTimeoutRef.current) {
clearTimeout(toastTimeoutRef.current);
}
};
}, []);

const triggerToast = () => {
window.dispatchEvent(
new CustomEvent('show-toast', {
detail: 'This is a toast message!',
})
);
};

const hideToast = () => {
if (toastTimeoutRef.current) {
clearTimeout(toastTimeoutRef.current);
toastTimeoutRef.current = null;
}
setShowToast(false);
};

return (

Trigger Toast

{showToast && (

{toastMessage}

✕


)}

);
}

export default App;

< /code>
Что я попробовал < /p>

Очистить время ожидания вручную в функции Hidetoast < /p>
< /li>
SetShowToast (false) выполняется < /p>
< /li>
< /ul>
Нажимать на ✕ ✕ ✕ ✕ ✕ должен немедленно скрыть тост, независимо от тайм-аута.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... tton-click