按钮内的工具提示正在传播到父元素 onclick 这是按钮答案

【问题标题】：Tooltip within button is propagating to parent element onclick which is button按钮内的工具提示正在传播到父元素 onclick 这是按钮
【发布时间】：2021-07-28 09:19:00
【问题描述】：

我有一个嵌套在按钮中的工具提示。在该工具提示中，工具提示弹出窗口中有一个“阅读更多”链接。问题是，当我单击该工具提示中的“阅读更多”链接时，它应该会带您进入一篇文章。但它单击父元素，它是一个按钮，并触发该 onClick 事件而不是阅读更多链接。我试过做 e.stopPropagation() 但这并没有成功。有没有其他方法可以解决这个问题？

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    return (
      <Button
        name="buyItem"
        variant="outlined"
        style={buttonStyleOverride}
        className={classes.button}
        color="primary"
        disabled={buttonDisabled}
        onClick={
          this.addItems,
          e => e.stopPropagation()
        }>
        Buy Pikafoods
        <TooltipIcon
          title="You can read more about pikafoods here."
          learnMoreLink="https://pokemon.com/articles/pikafoods"
          style={{ position: 'relative', top: '-2px' }} />
      </Button>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-native material-ui stoppropagation

【解决方案1】：

这里有些事情不应该做。

使用TooltipIcon 代替ToolTip
以错误的方式使用TooltipIcon
材料中的工具提示没有learnMoreLink。您可以参考here

这是解决方案：

renderTooltipContent = () => (
  <>
    You can read more about pikafoods 
    <a href="https://pokemon.com/articles/pikafoods">
      here
    </a>.
  </>
)

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    
    return (
        <>
            <Tooltip
                interactive
                title={this.renderTooltipContent()}
                style={{ position: 'relative', top: '-2px' }} 
            >
                <Button
                    name="buyItem"
                    variant="outlined"
                    style={buttonStyleOverride}
                    className={classes.button}
                    color="primary"
                    disabled={buttonDisabled}
                    onClick={this.addItems}
                >
                    Buy Pikafoods
                </Button>
            </Tooltip>
        </>
    );
}

}

【讨论】：