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;

我不知道为什么在调用state时false没有更新为closeAllFilters？编辑：单击“取消”按钮时，会调用closeAllFilters。 console.log(this.state.showAllFilters)输出true!。即使这是setState回调！

EDIT2：我发现openAllfilters在调用closeAllFilters之后会以某种方式自动被调用。因此，它将showAllFilters设置回true，并且模态保持打开状态。更新了问题标题以更好地反映问题。相同的堆栈跟踪如下：

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

因此，在进行大量调试和抓挠之后，我终于弄清了问题所在。由于事件传播，在调用openAllFilters之后被调用closeAllFilters。通过在模式上单击任意位置触发事件。我没有找到任何禁用此行为的道具，因此也许是react-modal的错误。因此，唯一需要解决的就是添加e.stopPropagation()！

因此更改后的方法变为：

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

感谢所有帮助！

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

1 个答案: