使用event.stopPropagation（）解决问题

Question

我在这里有两个组件，第一个是一个表，我在每行的<td>之一上附加了一个单击事件，该事件会召唤一个类似于工具提示的窗口：

<td onClick={ () => loadSelectorWindow(p.product_id) }>
    {
        p.selectorActive && 
        <SelectorWindow 
            cancelWindow={this.cancelSelectorWindow} 
            product_id={p.product_id}/>
    }
</td>

绑定到<td>单击的功能将搜索所有处于状态的产品，并在所选产品上翻转一个布尔值以显示工具提示。

  loadSelectorWindow = (product_id) => {                                                         
        this.setState({ products: this.state.products.map( p => {                       
            if (p.product_id == product_id) {                                                         
                p.variationSelectorActive = true                                                      
            } else {                                                                                  
                p.variationSelectorActive = false                                                     
            }                                                                                         
            return p                                                                                  
        })})                                                                                          
    }   

但是，工具提示还需要一个链接了窗口取消事件的按钮：

// within <SelectorWindow />
<p onClick={ () => {cancelWindow(event)} }> X </p>

此函数在状态之间循环，并将所有显示布尔值设置为false。

cancelSelectorWindow = (event) => {
    event.stopPropagation()
    this.setState ({ products: this.state.products.map( p => {
        p.variationSelectorActive = false
        return p
    })})
}

将断点放入代码中，我可以看到“取消”按钮正确地调用了“取消”功能，并暂时将displayTooltip布尔值设置为false。 问题是，在loadSelectorWindow当点击cancelWindow按钮时也被解雇，且布尔重新设置为true DX。

这就是为什么我尝试在其中放置event.stopPropagation调用的原因，但是显然仍在调用它。 在我的代码中没有其他地方提到loadSelectorWindow函数...有什么想法可以阻止它被调用？

Answer 1

您有一个html元素嵌套在另一个元素中，因此，如果单击内部的html元素，则您将同时收到这两个元素的onClick事件。 这就是您得到的。 您需要重新设计页面的布局，以免发生这种情况。

Answer 2

我忘了将event传递给cancelWindow回调函数。 反应为什么您的语法有时会如此混乱...

固定：

<p onClick={ (event) => {cancelWindow(event)} }> X </p>