diff --git a/packages/components/form/_example/customized-form-controls.tsx b/packages/components/form/_example/customized-form-controls.tsx
index 3ec0aca4a3..42d97c4ae3 100644
--- a/packages/components/form/_example/customized-form-controls.tsx
+++ b/packages/components/form/_example/customized-form-controls.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import { Form, Input, Button, MessagePlugin, Space, Select } from 'tdesign-react';
-import type { FormProps } from 'tdesign-react';
+import { Button, Form, Input, Select, Space } from 'tdesign-react';
interface ICourseSelect {
value?: {
@@ -30,10 +29,17 @@ function CourseSelect(props: ICourseSelect) {
]}
value={value?.type}
onChange={(v) => {
+ // type 改变时，清空 name
onChange?.({
- ...value,
type: v as string,
+ name: '',
});
+
+ // type 改变时，保留 name
+ // onChange?.({
+ // ...value,
+ // type: v as string,
+ // });
}}
placeholder="请选择课程类型"
/>
@@ -54,21 +60,23 @@ function CourseSelect(props: ICourseSelect) {
export default function BaseForm() {
const [form] = Form.useForm();
- const onSubmit: FormProps['onSubmit'] = (e) => {
- console.log(e);
- if (e.validateResult === true) {
- MessagePlugin.info('提交成功');
- }
- };
-
return (
-
diff --git a/packages/components/form/hooks/useInstance.tsx b/packages/components/form/hooks/useInstance.tsx
index 335c13c707..77637a3d27 100644
--- a/packages/components/form/hooks/useInstance.tsx
+++ b/packages/components/form/hooks/useInstance.tsx
@@ -1,7 +1,7 @@
-import { cloneDeep, get, isEmpty, isFunction, merge, set } from 'lodash-es';
+import { cloneDeep, isArray, isEmpty, isFunction, isObject, merge, set } from 'lodash-es';
import log from '@tdesign/common-js/log/index';
import useConfig from '../../hooks/useConfig';
-import { calcFieldValue, findFormItem, objectToArray, travelMapFromObject } from '../utils';
+import { calcFieldValue, findFormItem, travelMapFromObject } from '../utils';
import type { FormItemInstance } from '../FormItem';
import type {
@@ -149,16 +149,27 @@ export default function useInstance(
// 对外方法，设置对应 formItem 的值
function setFieldsValue(fields = {}) {
- const nameLists = objectToArray(fields);
- nameLists.forEach((nameList) => {
- const fieldValue = get(fields, nameList);
- const formItemRef = findFormItem(nameList, formMapRef);
+ const setValueByPath = (value: any, path: (string | number)[] = []) => {
+ // 当前路径对应的 FormItem 存在，直接设置
+ const formItemRef = findFormItem(path, formMapRef);
if (formItemRef?.current) {
- formItemRef.current.setValue?.(fieldValue);
+ formItemRef.current.setValue?.(value);
+ return;
+ }
+
+ // 递归处理对象
+ // { user: { name: '' } } => [['user', 'name']]
+ // { user: [{ name: '' }]} => [['user']]
+ if (isObject(value) && !isArray(value) && !isEmpty(value)) {
+ Object.keys(value).forEach((key) => {
+ setValueByPath(value[key], [...path, key]);
+ });
} else {
- set(floatingFormDataRef.current, nameList, fieldValue);
+ set(floatingFormDataRef.current, path, value);
}
- });
+ };
+
+ setValueByPath(fields);
}
// 对外方法，设置对应 formItem 的数据
diff --git a/packages/components/form/utils/index.ts b/packages/components/form/utils/index.ts
index eeba633aed..b7fc9bd8bb 100644
--- a/packages/components/form/utils/index.ts
+++ b/packages/components/form/utils/index.ts
@@ -1,4 +1,4 @@
-import { get, has, isArray, isEmpty, isObject } from 'lodash-es';
+import { get, has } from 'lodash-es';
import type { FormItemInstance } from '../FormItem';
import type { NamePath } from '../type';
@@ -62,26 +62,6 @@ function findFormItemDeep(
}
}
-// { user: { name: '' } } => [['user', 'name']]
-// 不处理数组类型
-// { user: [{ name: '' }]} => [['user']]
-export function objectToArray(obj: Record) {
- const result: (string | number)[][] = [];
-
- function traverse(current: any, path: string[] = []) {
- if (isObject(current) && !isArray(current) && !isEmpty(current)) {
- Object.keys(current).forEach((key) => {
- traverse(current[key], [...path, key]);
- });
- } else {
- result.push(path);
- }
- }
-
- traverse(obj);
- return result;
-}
-
export function calcFieldValue(name: NamePath, value: any, numericKeyAsIndex = true) {
if (!Array.isArray(name)) return { [name]: value };
let result: any = value;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index ab06f98abb..7043453d3c 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -47536,12 +47536,12 @@ exports[`csr snapshot test > csr test packages/components/form/_example/customiz
>
@@ -150826,7 +150826,7 @@ exports[`ssr snapshot test > ssr test packages/components/form/_example/clear-va
exports[`ssr snapshot test > ssr test packages/components/form/_example/custom-validator.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test packages/components/form/_example/customized-form-controls.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test packages/components/form/_example/customized-form-controls.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test packages/components/form/_example/disabled.tsx 1`] = `"
"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 9d84b8b498..253849f35c 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -422,7 +422,7 @@ exports[`ssr snapshot test > ssr test packages/components/form/_example/clear-va
exports[`ssr snapshot test > ssr test packages/components/form/_example/custom-validator.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test packages/components/form/_example/customized-form-controls.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test packages/components/form/_example/customized-form-controls.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test packages/components/form/_example/disabled.tsx 1`] = `"