如何防止父事件被触发

Question

我在React中遇到了很多模式，但似乎无法弄清楚解决它的最佳方法。

给出以下基本代码示例：

<Card onClick={this.toggleCollapsedModules}>
     <CardBody>
        <Row className="align-items-center">
             <Col xl={2} lg={3}>
                <h1>Test</h1>
             </Col>
             <Col xl={9} lg={9}>
                <h1>Description</h1>
             </Col>
             <Col lg={1} sm={12} xs={12}>
                <div className="float-right mr-3">
                    <Info
                       onClick={this.togglePricingModal}
                       className="icon-lg"
                       style={{ cursor: 'pointer' }}>
                    </Info>
                </div>
             </Col>
           </Row>
    </CardBody>
</Card>

如果我在<Card>元素上单击任意位置，则会触发toggleCollapsedModules，这会打开卡，在下面显示更多信息。问题是图标内的操作可切换模式，也触发了父级toggleCollapsedModules，这是正常的，因为图标是<Card>层次结构的一部分。

当并且仅当我单击图标本身时，如何防止父级切换？

这是没有任何触发器的基本视图。

这是单击图标的时间（您可以看到模式已打开，但父点击事件也已触发，因此卡现在也已展开）

我想到了一些显而易见的解决方法 ...

1-为用户提供一个按钮，使他们可以单击以展开卡，而不是单击卡上的任何位置。 （不符合要求）

2-使11个第一个Col间隔单击事件而不是整个12个间隔。（非常好，但是如果单击卡右侧的图标之外，则不会扩展卡这很烦人

3-就像我在JS / JQuery环境中一样，使用click事件的参数来调用preventDefault，但仍然会触发整个过程。

4-使用本地状态存储当前是否单击图标，如果是，请防止其折叠卡。 （这不是解决问题的办法吗？）

...但是他们似乎都围绕着我的真实问题，必须必须采用其他方法来解决。

有任何线索吗？我觉得我在React的理解中缺少一些东西，因为这是我们必须经常遇到的东西。

Answer 1

如果您想停止事件冒泡，可以使用e.stopPropagation()方法来代替e.preventDefault()或与之一起使用。