React Material-UI：如何在单击后禁用工具提示

Question

我在 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>

Answer 1

如果你查看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>  );}

Answer 2

您还可以实现通用工具提示，并在打开/关闭工具提示时具有托管状态。import Tooltip, { TooltipProps } from "@mui/material/Tooltip";import { useState } from "react";/**&nbsp;* MUI Tooltip wrapper with adaption to the move away once focuses left.&nbsp;*/export function ManagedTooltip(props: TooltipProps) {&nbsp; &nbsp; const [open, setOpen] = useState<boolean>(false);&nbsp; &nbsp; // Wrap Tooltip with div to capture mouse events&nbsp; &nbsp; return <div style={{ display: 'flex' }}&nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={() => setOpen(true)}&nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={() => setOpen(false)}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setOpen(false)}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; {/* Show the original MUI Tooltip with all props. */}&nbsp; &nbsp; &nbsp; &nbsp; {/* Just override the open attribute to be fully managed, and disable internal listeners */}&nbsp; &nbsp; &nbsp; &nbsp; <Tooltip {...props} open={open} disableHoverListener disableFocusListener />&nbsp; &nbsp; </div>;}一旦准备就绪，您就可以在任何地方使用它，就像原始的 MUI 工具提示一样。<Tabs&nbsp; className="navbar-routes"&nbsp; value={value}&nbsp; style={{ color: 'green'}}&nbsp; indicatorColor="secondary"&nbsp; onChange={handleChange}&nbsp;>&nbsp; {&nbsp; &nbsp; tabsData.map(({id,title,description}) => {&nbsp; &nbsp; &nbsp; return(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <ManagedTooltip description={description}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tab&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: '80%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginLeft: '-4px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginRight: 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={Link}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to={`/${title}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label={`${title}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </ManagedTooltip>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp;)}&nbsp; </Tabs>

Answer 3

我解决这个问题的方法是有条件地渲染工具提示。在您的情况下，我想您希望工具提示不呈现当前活动路线的选项卡：function ConditionalTooltip({renderTooltip, children, ...props}) {&nbsp; &nbsp; return renderTooltip ? <Tooltip {...props}>{children}</Tooltip> : children;}function Tabs() {&nbsp; &nbsp; const location = useLocation();&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Tabs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="navbar-routes"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ color: 'green'}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; indicatorColor="secondary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabsData.map(({id,title,description}) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ConditionalTooltip&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderTooltip={location.pathname.indexOf(title) === -1} /* only render tooltip on not active urls */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={description}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tab&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: '80%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginLeft: '-4px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginRight: 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={Link}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to={`/${title}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label={`${title}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ConditionalTooltip>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)}&nbsp; &nbsp; &nbsp; &nbsp; </Tabs>&nbsp; &nbsp; )}