next.js 当通过 prop 控制时，Ant Design模式不关闭

kkih6yb8 于 2023-01-05 发布在 Ant Design

关注(0)|答案(2)|浏览(157)

我在一个单独的组件中有以下Modal（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按钮时，它应该关闭modal（isModalOpen = false），但什么也没发生。当我使用console.log记录isModalOpen的值时，当我点击“关闭”按钮时，它一直显示true。由于某种原因，它没有变为false。
有什么想法，如果它是一个React问题或antd的问题？
React：16.13.1和：4.1.0

next.js

来源：https://stackoverflow.com/questions/62955916/ant-design-modal-not-closing-when-passing-prop-to-control-it

2条答案

按热度按时间

xt0899hw1#

发生这种情况是因为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

赞(0）回复(0）举报 2023-01-05

djmepvbi2#

这对我很有效onCancel={(e) => { e.stopPropagation(); setIsModalOpen1(false); }}

赞(0）回复(0）举报 2023-01-05