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

我写了一个

Signup

组件，基本如下：

const Login = (
  <Modal>
    <NormalLoginForm/ 
     ...
    </NormalLoginForm >
  </Modal>
)

const登录=(
我不确定您到底想做什么。但是根据。您可以使用模式的属性
footer
自定义页脚

您只需将这两个属性都设置为
null
，就可以不显示这两个按钮。（如果不再需要，请删除
onOk
和
onCancel
属性。）

下面是一个演示：

很抱歉，我有一段时间没有更新这个答案。antd更新了他们的文档，并说我们现在可以使用
footer={null}
。
您可以通过
footer={null}
进行检查


...
在模态道具中传递页脚={null}
如果您只想在底部隐藏一个取消按钮，并对右上角的X按钮使用
onCancel
，则只需像这样隐藏取消按钮：-

<Modal
    cancelButtonProps={{ style: { display: 'none' } }}
/>


此外，您还可以根据需要隐藏关闭图标并进行自定义

<Modal
  visible={this.state.visible}
  title="Title"
  closable={false}
  footer={null}>
  <div>
    Test For No two buttons on the footer.
    And No One in header.
  </div>
  <div>
    <Button type="ghost" onClick={this.handleClick}>Login</Button>
  </div>
</Modal>


测试页脚上是否没有两个按钮。
头上没有人。
登录

您还可以根据需要使用其他控件

static propTypes: {
        prefixCls: PropTypes.Requireable<string>;
        onOk: PropTypes.Requireable<(...args: any[]) => any>;
        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
        okText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        cancelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        centered: PropTypes.Requireable<boolean>;
        width: PropTypes.Requireable<React.ReactText>;
        confirmLoading: PropTypes.Requireable<boolean>;
        visible: PropTypes.Requireable<boolean>;
        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        closable: PropTypes.Requireable<boolean>;
        closeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    handleCancel: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    handleOk: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    renderFooter: (locale: ModalLocale) => JSX.Element;
    renderModal: ({ getPopupContainer: getContextPopupContainer, getPrefixCls, }: ConfigConsumerProps) => JSX.Element;
    render(): JSX.Element;

静态类型：{
prefixCls:PropTypes.Requireable；
onOk:PropTypes.Requireable any>；
onCancel:PropTypes.Requireable any>；
okText:PropTypes.Requireable；
取消文本：PropTypes.Requireable；
居中：道具类型。可要求；
宽度：道具类型。可要求；
确认加载：PropType。可要求；
可见：PropTypes.Requireable；
页脚：PropTypes.Requireable；
标题：PropTypes.Requireable；
可关闭：PropTypes.Requireable；
closeIcon:PropTypes.Requireable；
};
handleCancel：（e:React.MouseEvent）=>void；
handleOk：（e:React.MouseEvent）=>void；
renderFooter：（locale:ModalLocale）=>JSX.Element；
RenderModel:（{getPopupContainer:getContextPopupContainer，getPrefixCls，}:ConfigConsumerOps）=>JSX.Element；
render（）：JSX.Element；
以隐藏模式中的“取消”按钮。确认“取消”按钮的“无”显示为“通过”。请参考以下代码

 Modal.confirm({
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',
    cancelButtonProps : { style: { display: 'none' } },  
    onOk: () => {
      // code to be implemented
    },
  });

为了禁用cancel button按钮，对于CancelButton按钮，pass disabled为true

 Modal.confirm({
    title: 'Confirm Title',
    content: 'ABC.....',
    okText:'OK',
    cancelButtonProps : { disabled: true},  
    onOk: () => {
      // code to be implemented
    },
  });

或者你可以使用页脚道具

    <Modal 
      footer={[]}
    >
    <ShoutOutModal />
  </Modal>  



如果你想返回取消按钮，你可以这样做

      <Modal 
    
    footer={[<Button>Cancel</Button>]}
  >
    <ShoutOutModal />
  </Modal>  

如果您只想从modal中删除按钮，则只需将其传递给modal道具即可

<Modal footer={null} {...rest}></Modal>



如果您还想禁用关闭可能性，那么您还需要通过

<Modal closable={false} footer={null} {...rest}></Modal>

您可以通过以下方式隐藏
确定
和
取消
按钮：


...

或


...
谢谢！你救了我一天！如何隐藏模态页眉的关闭按钮？@MTM也许你可以从API文档中尝试“关闭图标”？谢谢。这会将页脚连同边框一起删除。太棒了！编辑：如何显示其中一个按钮。只需“确定”或“取消”按钮，但不能同时显示这两个按钮？
      <Modal 
    
    footer={[<Button>Cancel</Button>]}
  >
    <ShoutOutModal />
  </Modal>  

<Modal footer={null} {...rest}></Modal>

<Modal closable={false} footer={null} {...rest}></Modal>