在React应用中，使用Ant Design的Modal组件，展示如何在一个模态框关闭时立即打开另一个模态框。通过调整组件状态，实现在点击关闭按钮时切换模态框的可见性。具体代码示例展示了如何定义`showModal`、`handleOk`、`handleCancel`等方法来控制两个Modal的显示和隐藏。
你可以打开codepen 模拟 第一个. 我将我测试的 js 代码贴出来你覆盖过去 看看是不是你要的效果
const { Modal, Button } = antd;
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
visible2:false
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
visible2: true
});
};
handleOk2 = e => {
console.log(e);
this.setState({
visible2: false,
});
};
handleCancel2 = e => {
console.log(e);
this.setState({
visible2: false,
});
};
render() {
return (
Open Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Some contents...
Some contents...
Some contents...
title="Other Modal"
visible={this.state.visible2}
onOk={this.handleOk2}
onCancel={this.handleCancel2}
>
Some contents...
Some contents...
Some contents...
);
}
}
ReactDOM.render(, mountNode);
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
