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 可以 自定义 函数名