Question

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

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

NormalLoginForm组件来自官方网站https://ant.design/components/form/

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

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

Answer 1

我不确定你到底想做什么。但根据doc。您可以使用模态的属性footer来自定义页脚。

你必须将它们都设置为null才能显示这两个按钮。（如果您不再需要，请删除onOk和onCancel属性。）

以下是演示：http://codepen.io/andretw/pen/JbEmRO

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

如果您想要Login并通过单击一个按钮关闭模态，您还可以查看我上面写的演示。

<Modal
  visible={this.state.visible}
  title="Title"
  footer={[
    null, null,
  ]}
>
  <div>
    Test For No TWO buttons on the footer.
  </div>
  <div>
    <Button type="ghost" onClick={this.handleClick}>Login</Button>
  </div>
</Modal>

Answer 2

您可以footer={null}

执行此操作

Answer 3

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

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

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

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

Answer 4

您可以检查here

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

Answer 5

中的

pass footer = {null}

Answer 6

如果您只想在底部隐藏一个取消按钮，而对右上角的X按钮使用onCancel，则只需隐藏该取消按钮，就像这样：-

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

Answer 7

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

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

为了隐藏Modal.confirm传递中的取消按钮，对cancelButtonProps不显示任何内容。请参考以下代码。

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

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

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

Answer 9

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

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

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

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

Answer 10

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

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

或

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

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

10 个答案: