如何隐藏antd Modal的“确定”和“取消”按钮？

在使用Ant Design的Modal组件时，如果您希望隐藏默认的“确定”和“取消”按钮，可以通过设置footer属性为null来实现。这样做可以完全移除Modal底部的按钮区域，使其不显示任何内容。

示例代码

下面是如何使用footer属性隐藏按钮的一个例子：

jsx
import React from 'react';
import { Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    console.log('Clicked OK');
    this.setState({
      visible: false,
    });
  };

  handleCancel = () => {
    console.log('Clicked cancel');
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Custom Footer Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}  // 这里我们设置footer为null来隐藏底部的按钮
        >
          <p>Some contents...</p>
        </Modal>
      </>
    );
  }
}

export default App;

在这个例子中，当用户点击“Open Modal”按钮时，会弹出一个Modal对话框，但是没有显示底部的“确定”和“取消”按钮，因为我们将footer属性设置为了null。

自定义底部内容

如果您仍希望在Modal底部显示一些内容，但不使用默认按钮，可以传递自定义React元素给footer属性。例如：

jsx
<Modal
  title="Custom Footer Content"
  visible={this.state.visible}
  onOk={this.handleOk}
  onCancel={this.handleCancel}
  footer={[
    <Button key="back" onClick={this.handleCancel}>
      Return
    </Button>,
    <Button key="submit" type="primary" onClick={this.handleOk}>
      Submit
    </Button>,
  ]}
>
  <p>Some contents...</p>
</Modal>

这段代码会替换默认的按钮为"Return"和"Submit"按钮，提供了更多的自定义性和灵活性。