Javascript React DOM自动触发onClick处理程序

我有一个屏幕，上面显示了一些过滤器。它接受一个

isOpen

道具，该道具根据值隐藏或显示模态

单击“应用”按钮时，

模式

会成功打开，但单击“取消”时不会关闭

//Click Handlers in the parent component (filters.js)
openAllFilters = () => {
  this.setState({ showAllFilters: true });
};

closeAllFilters = () => {
  this.setState({ showAllFilters: false }, () =>
    console.log("state ", this.state.showAllFilters)
  ); // logs true!);
};

<AllFilters isOpen={this.state.showAllFilters}
    closeAllFilters={this.closeAllFilters}
    onRequestClose={this.closeAllFilters}
    renderAbcFilter={this.renderAbcFilter}
    renderDefFilter={this.renderDefFilter}
    renderXyzFilter={this.renderXyzFilter}
/>

---

从上面的调用堆栈来看，React似乎以某种方式触发了

openAllFilters

。我一个接一个地查看了这些函数调用，但仍然不明白为什么会发生这种情况。也许对React源代码非常了解的人能够提供一些见解。

因此，经过大量调试和努力，我终于找到了问题所在<由于事件传播，调用

closeAllFilters

后调用了code>openAllFilters。该事件通过单击模式上的任意位置触发。我没有找到任何道具来禁用这种行为，所以可能是

反应模式的错误。因此，唯一需要的修复是添加
e.stopPropagation（）

因此，更改后的方法变为：

closeAllFilters = (e) => {
    this.setState({ showAllFilters: false });
    e.stopPropagation();
}

谢谢你的帮助
 因此，必须有另一部分可能会立即将状态再次设置为
true
。但是，奇怪的是你从
setState
calback中看到了“true”。@devserkan:是的。这也让我感到困惑<代码>设置状态

回调保证提供更新的

状态

值！所以，试着以某种方式调试你的应用程序。查看状态变化。它正在经历真->假->真吗？另外，尝试取消注释某些部分，直到达到工作状态。@devserkan:初始状态（

showAllFilters

）在

构造函数内设置为
false
。模式打开时，状态由
openAllFilters
设置为
true
。除了
closeAllFilters
之外，没有其他代码更改状态，当然，这是不起作用的，因为它没有将状态设置回
false
。那么，这就奇怪了。正如我之前所分享的，您的最小化代码运行良好。因此，试着修剪其他部分，并按照比亚恩·斯特劳斯特鲁普（Bjarne Stroustrup）的建议“尝试找到显示错误的最小程序：）感谢您分享问题的原因。这仍然很奇怪。我使用的是
反应模式
，关闭处理程序不会像那样触发。甚至，我也在使用
onRequestClose
和
shouldlcloseonoverlay单击
，因为我想通过单击覆盖来关闭模型。我没有遇到像你这样的问题。关闭处理程序不应该通过单击任何地方触发，我想，只是覆盖。我弄错了吗？@devserkan也许这种行为只是我的应用程序独有的。但是当我在调用
closeAllFilters
后一步一步地运行代码时，我发现代码立即移动到
react-modal.js
中，在那里它通过一些函数，然后直接进入
openAllFilters
中。
openAllFilters (filters.js#382)
callCallback (react-dom.development.js#149)
invokeGuardedCallbackDev (react-dom.development.js#199)
invokeGuardedCallback (react-dom.development.js#256)
invokeGuardedCallbackAndCatchFirstError (react-dom.development.js#270)
executeDispatch (react-dom.development.js#561)
executeDispatchesInOrder (react-dom.development.js#580)
executeDispatchesAndRelease (react-dom.development.js#680)
executeDispatchesAndReleaseTopLevel (react-dom.development.js#688)
forEachAccumulated (react-dom.development.js#662)
runEventsInBatch (react-dom.development.js#816)
runExtractedEventsInBatch (react-dom.development.js#824)
handleTopLevel (react-dom.development.js#4826)
batchedUpdates$1 (react-dom.development.js#20439)
batchedUpdates (react-dom.development.js#2151)
dispatchEvent (react-dom.development.js#4905)
1 (react-dom.development.js#20490)
unstable_runWithPriority (scheduler.development.js#255)
interactiveUpdates$1 (react-dom.development.js#20489)
interactiveUpdates (react-dom.development.js#2170)
dispatchInteractiveEvent (react-dom.development.js#4882)

closeAllFilters = (e) => {
    this.setState({ showAllFilters: false });
    e.stopPropagation();
}