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。问题是，当单击cancelWindow按钮时，loadSelectorWindow也会被触发，并且布尔值被设置回真DX。

这就是为什么我试图将event.stopPropagation调用放在那里，但显然有些东西仍在调用它。在我的代码中没有其他地方提到loadSelectorWindow函数...任何想法如何阻止它被调用？

Answer 1

你有一个嵌套在另一个内部的html元素，所以如果你单击内部元素，那么你将收到两者的onClick事件。这就是你得到的。您需要重新设计页面布局，以免发生。

Answer 2

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

修正：

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

使用event.stopPropagation（）来解决问题

2 个答案: