gpt4 book ai didi

reactjs - 是否可以在不破坏布局的情况下在 ButtonGroup 内的禁用 MUI 按钮上呈现工具提示?

转载 作者:行者123 更新时间:2023-12-03 14:34:52 27 4
gpt4 key购买 nike

我正在尝试创建一个 MUI ButtonGroup带有禁用的按钮和工具提示。
以下代码块正确显示了按钮,但如此处所述(https://material-ui.com/components/tooltips/#disabled-elements),无法为禁用元素提供工具提示。

<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<Button disabled>{"Button B"}</Button>
</Tooltip>
</ButtonGroup>
但是如果我添加一个 span在禁用按钮周围,组布局将被破坏。
<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<span>
<Button disabled>{"Button B"}</Button>
</span>
</Tooltip>
</ButtonGroup>

最佳答案

禁用按钮有两个方面会妨碍工具提示行为:

  • 如您引用的文档中所述,禁用的 <button>元素(独立于 Material-UI)不会以支持 Tooltip 正确行为的方式触发事件。
  • Material-UI 具体disables pointer-events在 Material-UI 的 ButtonBase组件(由 Button 使用)禁用时。

  • 第二个问题可以通过覆盖 Material-UI 的禁用样式以允许指针事件来解决:
    import MuiButton from "@material-ui/core/Button";
    import { withStyles } from "@material-ui/core/styles";

    const Button = withStyles({
    root: {
    "&.Mui-disabled": {
    pointerEvents: "auto"
    }
    }
    })(MuiButton);
    第一个问题可以通过使用 Button 的 component 来解决。使用 <div> 的 Prop 元素而不是 <button>元素。禁用的按钮元素不接收点击事件,因此为了使 Button 仍然以禁用的方式运行,此代码删除了 onClick禁用时的 Prop 。
      const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
    const adjustedButtonProps = {
    disabled: disabled,
    component: disabled ? "div" : undefined,
    onClick: disabled ? undefined : onClick
    };
    return (
    <Tooltip title={tooltipText}>
    <Button {...other} {...adjustedButtonProps} />
    </Tooltip>
    );
    };
    下面是禁用按钮 B 和 C 的工作演示。按钮 A 和 B 使用上述方法,按钮 C 是常规 Material-UI 按钮,没有用于比较的工具提示。它们下方的附加按钮切换 B 和 C 的禁用状态。
    import React from "react";
    import Tooltip from "@material-ui/core/Tooltip";
    import MuiButton from "@material-ui/core/Button";
    import { withStyles } from "@material-ui/core/styles";
    import ButtonGroup from "@material-ui/core/ButtonGroup";

    const Button = withStyles({
    root: {
    "&.Mui-disabled": {
    pointerEvents: "auto"
    }
    }
    })(MuiButton);

    const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
    const adjustedButtonProps = {
    disabled: disabled,
    component: disabled ? "div" : undefined,
    onClick: disabled ? undefined : onClick
    };
    return (
    <Tooltip title={tooltipText}>
    <Button {...other} {...adjustedButtonProps} />
    </Tooltip>
    );
    };

    export default function App() {
    const [bAndCDisabled, setBAndCDisabled] = React.useState(true);

    return (
    <>
    <ButtonGroup>
    <ButtonWithTooltip
    tooltipText="This is Button A"
    onClick={() => console.log("A")}
    >
    {"Button A"}
    </ButtonWithTooltip>
    <ButtonWithTooltip
    tooltipText="This is Button B"
    onClick={() => console.log("B")}
    disabled={bAndCDisabled}
    >
    {"Button B"}
    </ButtonWithTooltip>
    <MuiButton onClick={() => console.log("C")} disabled={bAndCDisabled}>
    {"Button C"}
    </MuiButton>
    </ButtonGroup>
    <br />
    <br />
    <MuiButton
    variant="contained"
    onClick={() => setBAndCDisabled(!bAndCDisabled)}
    >
    Toggle disabled for B and C
    </MuiButton>
    </>
    );
    }
    Edit ButtonGroup with Tooltip on disabled Button

    关于reactjs - 是否可以在不破坏布局的情况下在 ButtonGroup 内的禁用 MUI 按钮上呈现工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61115913/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com