Ant-design Modal在传递道具控制它时没有关闭答案

【问题标题】：Ant-design Modal not closing when passing prop to control itAnt-design Modal在传递道具控制它时没有关闭
【发布时间】：2020-11-07 08:59:39
【问题描述】：

我在一个单独的组件中有以下模态（TestModal）：

<Modal
    title="title"
    centered={true}
    visible={this.props.isOpen}
    okText="Close"
    onOk={this.props.onClose}
>
    Test
</Modal>

然后在另一个组件中我有这个：

class ModalContainer extends React.Component {
    state = {
        isModalOpen: false,
    }

    render() {
        return (
            <div onClick={() => this.setState({ isModalOpen: true })}>
                <TestModal isOpen={this.state.isModalOpen} onClose={() => this.setState({ isModalOpen: false })} />
            </div>
        );
    }
}

现在，当我单击容器时，isOpen 属性更改为 true，并将其传递到 Modal 中，然后显示它。现在，当我单击 isOk 按钮时，它应该关闭模式（isModalOpen = false）但是没有任何反应。当我 console.log 当我单击“关闭”按钮时 isModalOpen 的值它一直显示为真。由于某种原因，它不会更改为 false。

知道是 react 问题还是 antd 问题？

反应：16.13.1 antd: 4.1.0

【问题讨论】：

标签： reactjs next.js antd

【解决方案1】：

这是因为ModalContainer 上的div 中存在onClick 处理程序。当在Modal 上单击关闭按钮时，单击事件也会冒泡到div 单击处理程序，这会将状态再次设置为true。

解决方法是停止点击事件的冒泡。您可以尝试这样做：

 <TestModal
     isOpen={this.state.isModalOpen}
     onClose={e => {
        e.stopPropagation();
        this.setState({ isModalOpen: false });
     }}
/>

这是在 CodeSandbox 中实现的相同解决方案。链接：https://codesandbox.io/s/ecstatic-bohr-637jo?file=/src/App.js:402-589

【讨论】：