自定义toast ,onMouseEnter onMouseOut 事件处理
时间: 2023-10-04 17:04:02 浏览: 42
首先,自定义 `toast` 需要在 `CSS` 中定义样式,例如:
```css
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
z-index: 9999;
}
```
然后,可以使用 `React` 中的 `useState` 和 `useEffect` 钩子来创建 `toast` 组件,并设置鼠标移入和移出事件。例如:
```jsx
import React, { useState, useEffect } from 'react';
const Toast = ({ message }) => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
if (message) {
setIsVisible(true);
const timer = setTimeout(() => {
setIsVisible(false);
}, 3000);
return () => clearTimeout(timer);
}
}, [message]);
const handleMouseEnter = () => {
setIsVisible(false);
};
const handleMouseOut = () => {
setIsVisible(true);
};
return (
<>
{isVisible && <div className="toast">{message}</div>}
<div onMouseEnter={handleMouseEnter} onMouseOut={handleMouseOut}>
{/* 内容 */}
</div>
</>
);
};
export default Toast;
```
在上面的代码中,我们使用了 `useState` 钩子来管理 `toast` 的可见性状态。当传入 `message` 属性时,显示 `toast`,并在 3 秒后自动隐藏。同时,我们也设置了 `onMouseEnter` 和 `onMouseOut` 事件处理函数,以便在鼠标移入和移出时控制 `toast` 的显示和隐藏。