Ant-design Modal 在传递 prop 来控制它时没有关闭

Question

我在单独的组件中有以下模态（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 的值时，当我单击“关闭”按钮时，它一直显示 true。由于某种原因，它不会更改为 false。

知道这是 React 问题还是 antd 问题吗？

反应：16.13.1 antd：4.1.0

Answer 1

发生这种情况是因为ononClick中存在处理程序。单击关闭按钮时，单击事件也会冒泡到单击处理程序，从而再次将状态设置为。divModalContainerModaldivtrue

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

 <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