我在 Material-UI 中有一個選項卡組件，我想在其上實現一個工具提示。我的問題是，當我單擊選項卡組件時，工具提示并沒有消失。我單擊該選項卡后它必須消失。目前，即使我單擊該選項卡，它仍然可見。我該如何糾正這個問題？<Tabs className="navbar-routes" value={value} style={{ color: 'green'}} indicatorColor="secondary" onChange={handleChange} > { tabsData.map(({id,title,description}) => { return( <ToolTip description={description}> <Tab style={{ minWidth: 10, fontSize: '80%', fontWeight: 'bold', marginLeft: '-4px', marginRight: 4 }} key={id} component={Link} to={`/${title}`} label={`${title}`} /> </ToolTip> ); } )} </Tabs>
3 回答
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
如果你查看Material-UI?tooltip API的文檔
你會發現一個名為disableHoverListener的道具
bool
默認值： false
不響應懸停事件。
將其設置為True關閉工具提示 onMouseOver 事件觸發器。
或者你可以簡單地讓它完全處于控制之中。
通過將onClick、onMouseOver、onMouseLeave、綁定open到相關組件。
import React, { useState } from "react";
import "./styles.css";
import { Tooltip, Tab } from "@material-ui/core";
export default function App() {
? const [flg, setFlg] = useState(false);
? const [isHover, setIsHover] = useState(false);
? return (
? ? <div className="App">
? ? ? <Tooltip
? ? ? ? title={"message"}
? ? ? ? aria-label="add"
? ? ? ? placement="bottom"
? ? ? ? open={!flg && isHover}
? ? ? >
? ? ? ? <Tab
? ? ? ? ? label={`Click: ${!flg ? "enabled" : "disabled"}`}
? ? ? ? ? onClick={() => setFlg(!flg)}
? ? ? ? ? onMouseOver={() => setIsHover(true)}
? ? ? ? ? onMouseLeave={() => setIsHover(false)}
? ? ? ? />
? ? ? </Tooltip>
? ? </div>
? );
}
ITMISS
TA貢獻1871條經驗 獲得超8個贊
您還可以實現通用工具提示，并在打開/關閉工具提示時具有托管狀態。
import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
import { useState } from "react";
/**
* MUI Tooltip wrapper with adaption to the move away once focuses left.
*/
export function ManagedTooltip(props: TooltipProps) {
const [open, setOpen] = useState<boolean>(false);
// Wrap Tooltip with div to capture mouse events
return <div style={{ display: 'flex' }}
onMouseEnter={() => setOpen(true)}
onMouseLeave={() => setOpen(false)}
onClick={() => setOpen(false)}
>
{/* Show the original MUI Tooltip with all props. */}
{/* Just override the open attribute to be fully managed, and disable internal listeners */}
<Tooltip {...props} open={open} disableHoverListener disableFocusListener />
</div>;
}
一旦準備就緒，您就可以在任何地方使用它，就像原始的 MUI 工具提示一樣。
<Tabs
className="navbar-routes"
value={value}
style={{ color: 'green'}}
indicatorColor="secondary"
onChange={handleChange}
>
{
tabsData.map(({id,title,description}) => {
return(
<ManagedTooltip description={description}>
<Tab
style={{
minWidth: 10,
fontSize: '80%',
fontWeight: 'bold',
marginLeft: '-4px',
marginRight: 4
}}
key={id}
component={Link}
to={`/${title}`}
label={`${title}`}
/>
</ManagedTooltip>
);
}
)}
</Tabs>
慕萊塢森
TA貢獻1810條經驗 獲得超4個贊
我解決這個問題的方法是有條件地渲染工具提示。在您的情況下，我想您希望工具提示不呈現當前活動路線的選項卡：
function ConditionalTooltip({renderTooltip, children, ...props}) {
return renderTooltip ? <Tooltip {...props}>{children}</Tooltip> : children;
}
function Tabs() {
const location = useLocation();
return (
<Tabs
className="navbar-routes"
value={value}
style={{ color: 'green'}}
indicatorColor="secondary"
onChange={handleChange}
>
{
tabsData.map(({id,title,description}) => {
return(
<ConditionalTooltip
renderTooltip={location.pathname.indexOf(title) === -1} /* only render tooltip on not active urls */
title={description}
>
<Tab
style={{
minWidth: 10,
fontSize: '80%',
fontWeight: 'bold',
marginLeft: '-4px',
marginRight: 4
}}
key={id}
component={Link}
to={`/${title}`}
label={`${title}`}
/>
</ConditionalTooltip>
);
}
)}
</Tabs>
)
}
- 3 回答
- 0 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消