ソースを参照

docs(dashboard): Add docs on interacting with detail page form

Michael Bromley 1 ヶ月 前
コミット
3ec771cdcf

+ 63 - 0
docs/docs/guides/extending-the-dashboard/customizing-pages/customizing-detail-pages.md

@@ -64,3 +64,66 @@ defineDashboardExtension({
     ],
 });
 ```
+
+## Interacting with the detail page form
+
+Sometimes you want to define a [page block](./page-blocks.md) that needs to interact with the detail page's form:
+
+- To take some action when the form is submitted
+- To mark the form as dirty from inside your page block
+
+These advanced use-cases can be achieved by using the `useFormContext` hook from `react-hook-form`.
+
+### Reacting to form submission
+
+Here's how you can use the `formState` to react to a form submission:
+
+```tsx
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+export function MyPageBlock() {
+    const { formState: { isSubmitSuccessful } } = useFormContext();
+
+    useEffect(() => {
+        if (isSubmitSuccessful) {
+            console.log('The detail page form was submitted');
+        }
+    }, [isSubmitSuccessful]);
+}
+```
+
+### Setting the form as dirty
+
+Let's say you have a page block that interacts with a custom mutation to set some
+data related to a Product. You want to fire your custom mutation when the form is submitted -
+this is done using the pattern above.
+
+However, you need to somehow signal to the form that it is now dirty and can be save, even though
+no property of the Product itself may have changed.
+
+Here's a work-around to allow this:
+
+```tsx
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Button } from '@vendure/dashboard';
+
+export function MyPageBlock() {
+    const { register } = useFormContext();
+
+    useEffect(() => {
+        // We register a "fake" field on the form that we only use
+        // to track the dirty state of this page block component
+        register('my-page-block-dirty-tracker')
+    }, [register]);
+    
+    return (
+        <Button onClick={() => {
+            // We set that "fake" field to a random value to mark the whole
+            // form as dirty, so the "save" button becomes enabled.
+            setValue('dirty-tracker', Math.random(), { shouldDirty: true });
+        }}>Set dirty</Button>
+    );
+}
+```