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

Question

我写了一个Signup组件，基本如下：

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

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

我不需要Modal上的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并通过单击一个按钮关闭Modal，你需要调用处理函数（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

你可以通过 footer={null}

Answer 3

你可以查看here

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

Answer 4

在 Modal 道具中传递 footer= {null}

Answer 5

如果您只想隐藏底部的取消按钮并使用 onCancel 作为右上角的 X 按钮，那么只需像这样隐藏取消按钮：-

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

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

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

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

如果你想return只需要取消按钮就可以了

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

Answer 9

如果你只想从模式中删除按钮，那么你只需要传递给模式道具

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

如果您还想禁用关闭位置，那么您还需要通过

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

Answer 10

您可以通过以下方式隐藏 Ok 和 Cancel 按钮：

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

或

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

Answer 11

删除

页脚 -> footer={null}

关闭图标 -> closable={false}

确定按钮 -> okButtonProps={{ style: { display: 'none' } }}

取消按钮 -> cancelButtonProps={{ style: { display: 'none' } }}

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

How to hide the OK and Cancel buttons of antd Modal?

reactjs

antd