soulmachine soulmachine - 14 days ago 8
React JSX Question

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

I wrote a

Signup
component, which is basically as follows:

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


The
NormalLoginForm
component is from the official website here https://ant.design/components/form/

I don't need the two Buttons
OK
and
Cancel
on the Modal, how to hide the two buttons ?

Also are there any good examples about how to integrate login and signup buttons with the navigation menu?

Answer

I'm not sure what you exactly want to do. But according to the doc. You can customize your footer by using an attribute footer for Modal.

And you just have to set both of them to null to not showing those two buttons. (And remove the onOk and onCancel attributes if you don't need them anymore.)

Here is a demo: 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>

And if you want to do Login and close the Modal by clicking one button, you also check the demo I wrote above.

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