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";

/**

 * 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>

Answer 3

我解决这个问题的方法是有条件地渲染工具提示。在您的情况下，我想您希望工具提示不呈现当前活动路线的选项卡：

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>

    )

}