From c83f3ca41198b81085f04be453216cf5e8241e33 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 12 Nov 2024 15:23:44 +0800
Subject: [PATCH] demo: fix Form variant demo (#51587)

---
 components/form/demo/variant.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/form/demo/variant.tsx b/components/form/demo/variant.tsx
index 7f57329b9d..2fdc272e6b 100644
--- a/components/form/demo/variant.tsx
+++ b/components/form/demo/variant.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Button,
   Cascader,
@@ -11,7 +11,6 @@ import {
   TreeSelect,
   Segmented,
 } from 'antd';
-import type { FormProps } from 'antd';
 
 const { RangePicker } = DatePicker;
 
@@ -27,18 +26,15 @@ const formItemLayout = {
 };
 
 const App: React.FC = () => {
-  const [componentVariant, setComponentVariant] = useState<FormProps['variant']>('filled');
-
-  const onFormVariantChange = ({ variant }: { variant: FormProps['variant'] }) => {
-    setComponentVariant(variant);
-  };
+  const [form] = Form.useForm();
+  const variant = Form.useWatch('variant', form);
   return (
     <Form
       {...formItemLayout}
-      onValuesChange={onFormVariantChange}
-      variant={componentVariant}
+      form={form}
+      variant={variant || 'filled'}
       style={{ maxWidth: 600 }}
-      initialValues={{ variant: componentVariant }}
+      initialValues={{ variant: 'filled' }}
     >
       <Form.Item label="Form variant" name="variant">
         <Segmented options={['outlined', 'filled', 'borderless']} />