添加仅在禁用按钮时才出现的工具提示

Question

我的 React 应用程序中有这个

Button

：

<Button
    onClick={this.showReissue}
    primary={true}
    fullWidth={false}
    disabled={this.state.disableButton}
>

this.state.disableButton

是一个

boolean

值。

有什么方法可以添加仅在禁用按钮时才激活的工具提示吗？

Answer 1

我想应该是这样的

<Tooltip title={disableButton == true ? "" : "test"}>
            <Button
              variant="outlined"
              onClick={showReissue}
              primary={true}
              fullWidth={false}
              disabled={disableButton}
            >
              Test
            </Button>
</Tooltip>

这里有一个尝试的链接（我使用了MUI，但逻辑是相同的） https://codesandbox.io/s/exciting-germain-dumokw?file=/src/App.js:373-651

我从这个答案

中得到启发

Answer 2

只需将相同的条件添加到 title 属性即可

<Button
  onClick={this.showReissue}
  primary={true}
  fullWidth={false}
  disabled={this.state.disableButton}
  title={this.state.disableButton ? "your tooltip":""}>
>