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

1. 勾销 底部 按钮

形容：

底部按钮能够扭转

官网文档

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>

定义底部右下角 的 按钮 可依据须要应用 一个或者 多个按钮

onClick 对应 的办法 handleOk 和 handleCancel 能够 自定义 函数名