javascript - React-DOM 自动触发 onClick 处理程序

Question

我有一个react-modal其中显示了一些过滤器。它接受一个 isOpen 属性，根据值隐藏或显示 Modal。

单击“应用”按钮时模态会成功打开，但单击“取消”时不会关闭。

//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}
/>

模态组件(AllFilters.js):

import React from 'react';
import Modal from 'react-modal';

const RenderFilter = props => {
    return <div className="filter-wrapper">
        <h3 className="filter-title">{props.title}</h3>
        {props.renderFunction()}
    </div>;
}

const AllFilters = (props) => {
    const modalStyles = {
        overlay: {
            zIndex: 200,
        },
        content: {
            top: '0',
            left: '0',
            right: '0',
            bottom: '0',
            padding: '0',
        }
    };

    return (
        <Modal isOpen={props.isOpen}
            style={modalStyles}
            onRequestClose={props.closeAllFilters}>
            <div className="all-filters-container">
                <RenderFilter title='ABC' renderFunction={() => props.renderAbcFilter(false)} />
                <RenderFilter title='XYZ' renderFunction={() => props.renderXyzFilter(false)} />
                <RenderFilter title='DEF' renderFunction={() => props.renderDefFilter(false)} />
            </div>
            <div className="all-filters-footer">
                <button className="button button-secondary filter-cancel-btn " onClick={props.closeAllFilters}>CANCEL</button>
        </Modal >
    )
}

export default AllFilters;

我不明白为什么调用 closeAllFilters 时 state 没有更新为 false？ 编辑:当单击“取消”按钮时，closeAllFilters 确实会被调用。并且 console.log(this.state.showAllFilters) 输出 true!。即使这是 setState 回调!

EDIT2:我认为在调用 closeAllFilters 后，openAllfilters 会以某种方式自动被调用。因此，它将 showAllFilters 设置回 true 并且模式保持打开状态。已更新问题标题以更好地反射(reflect)问题。其堆栈跟踪如下:

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)

从上面的调用堆栈来看，React 似乎以某种方式触发了 openAllFilters。我一一检查了这些函数调用，但仍然无法弄清楚为什么会发生这种情况。也许熟悉 React 源代码的人也许能够提供一些见解..

Answer 1

经过大量的调试和绞尽脑汁，我终于弄清楚了问题所在。由于事件传播，在调用 closeAllFilters 后调用了 openAllFilters。通过单击模式上的任意位置来触发该事件。我没有找到任何 Prop 来禁用此行为，所以也许这是 react-modal 的一个错误。因此，唯一需要修复的是添加 e.stopPropagation()!

所以改变后的方法就变成了:

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

感谢您的所有帮助!