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

Question

我写了一个

Signup

组件，基本如下：

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

NormalLoginForm

组件来自官网这里https://ant.design/components/form/

我不需要模态框上的

OK

和

Cancel

这两个按钮，如何隐藏这两个按钮？

还有关于如何将登录和注册按钮与导航菜单集成的好例子吗？

Answer 1

[更新]我不确定你到底想做什么。但根据doc。您可以使用

Modal

的属性 footer 来自定义页脚。

根据更新的文档（2021年8月31日），我们只需要使用

footer={null}

，不再需要使用

footer={null, null}

。

这是示例：https://codepen.io/andretw/pen/RwbBYpb

<Modal
  visible={this.state.visible}
  title="Title"
  //onOk={this.handleOk}
  //onCancel={this.handleCancel}
  footer={null}
>Test For No TWO buttons on the footer.</Modal>

顺便说一句，如果您想要执行

Login

并通过单击一个按钮关闭模态框，则需要调用处理函数（handleOk）并将其内部的可见选项设置为false。 （现在 antd 有很棒的文档，你可以查看它们以找到更多示例。我编写并重写了这个示例，因为当时很少有示例这样做。）

// A handler/callback function 
handleLogin = () => {
  this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
  }, 3000);
};

// Add a customized button to the footer
footer={[
  <Button key="submit" type="primary" loading={loading} onClick={this.handleLogin}>
  Login
  </Button>,
]}

Answer 2

如果您只想隐藏底部的取消按钮并使用

onCancel

作为右上角的 X 按钮，则只需隐藏取消按钮，如下所示： -

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

Answer 3

删除

页脚 ->

footer={null}

关闭图标 ->

closable={false}

确定按钮 ->

okButtonProps={{ style: { display: 'none' } }}

取消按钮 ->

cancelButtonProps={{ style: { display: 'none' } }}

Answer 4

你可以通过

footer={null}

来做到

Answer 5

您可以通过以下方式隐藏

Ok

和

Cancel

按钮：

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

或

<Modal
 okButtonProps={{
          style: {
            display: "none",
          },
        }}
        cancelButtonProps={{
          style: {
            display: "none",
          },
        }}
...
>
...
</Modal>

Answer 6

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

<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;

Answer 7

为了隐藏 Modal.confirm 中的取消按钮，请将显示设置为 none 传递给cancelButtonProps。请参考以下代码。

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

为了禁用取消按钮，请将cancelButtonProps的disabled设置为true。

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

Answer 8

你可以检查这里

<Model
  footer={null}
>
...
</Model>

Answer 9

如果您只想从模态中删除按钮，那么您需要的只是传递给模态道具

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

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

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

Answer 10

在 Modal 属性中传递 footer= {null}

Answer 11

或者你可以使用页脚道具。

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

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

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

Answer 12

也许您只想在状态加载时禁用“确定”按钮。

<Modal
  okButtonProps={{
    style: {
      cursor: loading ? 'not-allowed' : 'default',
    },
  }}
></Modal>

Answer 13

您可以禁用按钮

okButtonProps={{
              disabled: true
            }}
cancelButtonProps={{
                  disabled: true
                }}