reactjs - 如何隐藏antd Modal的OK和Cancel按钮？

Question

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

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

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

我不需要两个按钮OK，Cancel在 Modal 上，如何隐藏两个按钮？

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

score 44 · Accepted Answer

[更新]我不确定你到底想做什么。但根据文档。您可以使用 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) 并将其内部的 visible 选项设置为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>,
]}

score 18 · Accepted Answer

如果您只想隐藏底部的取消按钮并使用onCancel右上角的 X 按钮，则只需隐藏取消按钮，如下所示：-

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

score 7 · Accepted Answer

7

你可以这样做footer={null}

于 2017-01-26T13:24:00.817 回答

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

或者

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

score 2 · Accepted Answer

为了隐藏 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
    },
  });

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

1

你可以在这里查看

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

于 2018-08-17T08:50:20.383 回答

score 0 · Accepted Answer

0

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

于 2019-11-26T06:54:37.480 回答

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

去除

页脚->footer={null}

关闭图标->closable={false}

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

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

reactjs - 如何隐藏antd Modal的OK和Cancel按钮？

11 回答 11

Related

Reference