fix: Form resetFields

arco-design · May 31, 2024 · 5c47354 · 5c47354
1 parent f081b14
commit 5c47354
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/packages/arcodesign/components/form/demo/index.md b/packages/arcodesign/components/form/demo/index.md
@@ -82,6 +82,8 @@ export default function FormDemo() {
     }
     return (
         <div>
+            <Button onClick={()=>{formRef.current.form.resetFields()}}>reset</Button>
+            <Button onClick={()=>{console.error(formRef.current.form.getFieldsValue())}}>values</Button>
             <Radio.Group options={options} value={layout} onChange={setLayout} />
             <Form
                 ref={formRef}
@@ -90,7 +92,7 @@ export default function FormDemo() {
                 layout={layout}
                 initialValues={{ birthday: 1449730183515 }}
             >
-                <Form.Item field="name" label="UserName" trigger="onBlur" rules={rules.name} required>
+                <Form.Item field="name" label="UserName" trigger="onBlur" rules={rules.name} required initialValue='12'>
                     <Input  placeholder="Please input username" clearable border="none" />
                 </Form.Item>
                 <Form.Item field="age" label="Age" trigger="onInput" rules={[{type: 'number', min: 12, validateLevel: 'warning'}]}>

diff --git a/packages/arcodesign/components/form/demo/use-form.md b/packages/arcodesign/components/form/demo/use-form.md
@@ -7,6 +7,7 @@ import {
     Form,
     Input,
     Radio,
+    Checkbox,
     Button,
 } from '@arco-design/mobile-react';
 import { ValidatorType } from '@arco-design/mobile-utils';
@@ -74,19 +75,36 @@ export default function FormDemo() {
 
     return (
         <div>
+            <Button onClick={() => {
+                form.resetFields();
+            }}>reset</Button>
             <Radio.Group options={options} value={layout} onChange={setLayout} />
             <Form
                 form={form}
                 onSubmit={onSubmit}
                 onSubmitFailed={onSubmitFailed}
                 layout={layout}
+                onValuesChange={console.error}
             >
                 <Form.Item field="name" label="UserName" trigger="onBlur" rules={rules.name} required>
                     <Input  placeholder="Please input username" clearable border="none" />
                 </Form.Item>
                 <Form.Item field="age" label="Age" trigger="onInput" rules={[{type: 'number', min: 12, validateLevel: 'warning'}]}>
                     <Input placeholder="Please input age"  clearable border="none" onInput={handleInput}/>
                 </Form.Item>
+                <Form.Item
+                    field="checkbox"
+                    label="Checkbox"
+                    required
+                >
+                    <Checkbox.Group
+                        layout='block'
+                    >
+                        <Checkbox value={1} style={{height: 42}}>Option content 1</Checkbox>
+                        <Checkbox value={2} style={{height: 42}}>Option content 2</Checkbox>
+                        <Checkbox value={3} style={{height: 42}}>Option content 3</Checkbox>
+                    </Checkbox.Group>
+                </Form.Item>
                 <Form.Item field="gender" label="Gender">
                     <Radio.Group options={genderOptions} />
                 </Form.Item>

diff --git a/packages/arcodesign/components/form/form-item.tsx b/packages/arcodesign/components/form/form-item.tsx
@@ -16,7 +16,6 @@ import { GlobalContext } from '../context-provider';
 import {
     IFieldError,
     FieldValue,
-    IFormItemContext,
     IFormItemInnerProps,
     FormItemProps,
     ValidateStatus,
@@ -42,13 +41,9 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerSta
 
     private _touched = false;
 
-    constructor(props: IFormItemInnerProps, context: IFormItemContext) {
+    constructor(props: IFormItemInnerProps) {
         super(props);
         this.destroyField = () => {};
-        if (props?.initialValue && props.field) {
-            const { setInitialValues } = context.form.getInternalHooks();
-            setInitialValues({ [props.field]: props.initialValue });
-        }
     }
 
     componentDidMount() {

diff --git a/packages/arcodesign/components/form/useForm.ts b/packages/arcodesign/components/form/useForm.ts
@@ -148,7 +148,11 @@ class FormData {
     };
 
     resetFields = () => {
-        this.setFieldsValue(this._initialValues);
+        const curValues = { ...this.getFieldsValue() } || {};
+        Object.entries(curValues).forEach(([key]) => {
+            curValues[key] = undefined;
+        });
+        this.setFieldsValue({ ...curValues, ...this._initialValues });
     };
 
     validateFields = () => {