关于前端:React-Ant-Design-取消-和-自定义-Modal-的-底部-按钮

29次阅读

共计 917 个字符，预计需要花费 3 分钟才能阅读完成。

形容：

 底部按钮能够扭转

官网文档

https://3x.ant.design/components/modal-cn/#components-modal-demo-button-props

1.1、首先在 state 中

state = {visible: false}

handleOk = e => {
  this.setState({visible: false});
};

handleCancel = e => {
  this.setState({visible: false});
};

2.1、其次应用 Modal 中的 footer 属性

<Modal
  title="弹窗题目"
  visible={visible}
  confirmLoading={confirmLoading}
  onCancel={this.handleCancel}
  footer={[] // 设置 footer 为空，去掉 勾销 确定默认按钮
  }
>
</Modal>

这样就去掉了确认和勾销按钮

2 自定义底部按钮：

2.1、首先在 state 中

state = {visible: false}

handleOk = e => {
  this.setState({visible: false});
};

handleCancel = e => {
  this.setState({visible: false});
};

2.2、其次应用 Modal 中的 footer 属性：

<Modal
  visible={visible}
  title="弹窗题目"
  onOk={this.handleOk}
  onCancel={this.handleCancel}
  footer={[<Button key="button1" onClick={this.handleCancel}> 按钮 1 </Button>,
  <Button key="button2" type="primary" loading={loading} onClick={this.handleOk}>
  按钮 2
  </Button>,
  <Button key="button3"> 按钮 3 </Button>
]}
>
</Modal>