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

Question

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

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

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

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

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

Answer 1

去除

页脚->footer={null}

关闭图标 ->closable={false}

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

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

Answer 2

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

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

Answer 3

我不确定您到底想做什么。但是据医生说。您可以通过使用属性自定义页脚footer的模态。

您只需将它们都设置null为不显示这两个按钮。（如果您不再需要onOkand onCancel属性，请删除它们。）

这是一个演示：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，也可以查看我上面编写的演示。

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

抱歉，我有一段时间没有更新此答案了。antd更新了他们的文档，并说我们footer={null}目前可以使用。

Answer 4

你可以通过 footer={null}

Answer 5

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

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

或者

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