Modal框需要三个按钮，footer

最新推荐文章于 2025-03-04 16:37:31 发布

证证乐乐

最新推荐文章于 2025-03-04 16:37:31 发布

阅读量6.6k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/fhkkkbfgggjk/article/details/102802307

版权

react 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在需要三个操作按钮的情景下，设计并实现一个自定义的Modal对话框组件，该组件包含footer部分，可以接收传入的按钮配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

当需要三个按钮时，写个组件

footer={buttons}


	<Modal
					width="400px"
					title="选择外包服务"
					visible={this.state.visible3}
					footer={buttons}
					maskClosable={false}
					destroyOnClose={true}
					closable={false}
					forceRender={true}
				>
					<ServiceSource
						loading={this.state.loading}
						ref="children"
						service={this.service}
						qd={this.qd}
						getFieldDecorator={getFieldDecorator}
						serviceNamelist={this.state.serviceNamelist}
						serviceId={this.state.serviceId}
					/>
				</Modal>



         	let buttons = [];
			buttons = [
				<Button type="primary" onClick={this.quxiao} key="test">
					取消
				</Button>,
				<Button type="primary" onClick={this.qd}>
					确定
				</Button>,
				<Button type="primary" onClick={this.xj}>
					新建外包服务
				</Button>
			]