Drawer OnClose -- Additional function without overriding original behaviour?
Hi!
I'm using a <Drawer> that passes drawerProps in. Inside the drawerProps is a default onClose function that closes the window.
However, I'd like to call an additional function refetch() alongside it.
Directly setting onClose to refetch() overrides the original onClose function. Is there a way I could use both?
5 Replies
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can call multiple functions within the
onClose
prop. You just need to create a new function that calls both the refetch()
function and the original onClose
function. Here's how you can do it:
In this example, handleClose
is a new function that calls both refetch()
and the original onClose
function. When the Drawer is closed, both functions will be called.
Please note that if warnWhenUnsavedChanges
is true
, it will show a confirmation modal before closing the <Drawer>
. If you override this function, you have to handle this confirmation modal manually.
For more information, you can refer to the useDrawerForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useDrawerForm).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below
dependent-tan•14mo ago
@kapa.ai Does <Form> have a prop similar to onSubmit?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, the
<Form>
component in Ant Design, which is used in Refine, has an onFinish
prop that acts similarly to onSubmit
. The onFinish
prop is a function that is called when the form is successfully validated and submitted.
Here's an example of how you can use it:
In this example, the onFinish
function will log the form values when the form is submitted.
You can also use the onFinish
prop with the useForm
hook in Refine. The useForm
hook returns an onFinish
method that you can pass to the onFinish
prop of the <Form>
component.
Here's an example:
In this example, the onFinish
method from the useForm
hook is passed to the onFinish
prop of the <Form>
component.
For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm) and the Form component documentation (https://ant.design/components/form/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below