按钮内的工具提示传播到父元素 onclick，即按钮

Question

我有一个嵌套在按钮中的工具提示。在该工具提示中，工具提示弹出窗口中有一个 'read more' link。问题是当我单击该工具提示中的 'read more' link 时，应该会将您带到一篇文章。但它单击了父元素，它是一个按钮，并触发了 onClick 事件而不是阅读更多 link。我试过 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>
    );
  }
}

Answer 1

这里有些事情是不应该做的

使用 TooltipIcon 代替 ToolTip
错误地使用TooltipIcon
material 中的工具提示没有 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>
        </>
    );
}

}

按钮内的工具提示传播到父元素 onclick，即按钮

Tooltip within button is propagating to parent element onclick which is button

javascript

stoppropagation

reactjs

react-native

material-ui