Skip to content

Conversation

@RylanBot
Copy link
Collaborator

@RylanBot RylanBot commented Oct 31, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

复现代码存档
import React from 'react';
import { MinusCircleIcon } from 'tdesign-icons-react';
import { Button, Form, Input, Space } from 'tdesign-react';

const { FormItem, FormList } = Form;

export default function BaseForm() {
  const [form] = Form.useForm();

  const handleUpdateSpecificItem = (index: number) => {
    const currentValues = form.getFieldsValue(true);
    const newList = [...currentValues.list];
    newList[index] = {
      ...newList[index],
      b: [{ c: '单独更新这一项' }],
    };

    form.setFieldsValue({ list: newList });
  };

  const handleUpdateWithSetFields = (listIndex: number, bIndex: number) => {
    form.setFields([
      {
        name: ['list', listIndex, 'b', bIndex, 'c'],
        value: '通过setFields更新的值',
      },
    ]);
  };

  const handleBatchUpdateWithSetFields = () => {
    form.setFields([
      {
        name: ['list', 0, 'a'],
        value: '批量更新-a字段',
      },
      {
        name: ['list', 0, 'b', 0, 'c'],
        value: '批量更新-嵌套c字段',
      },
    ]);
  };

  return (
    <Form
      form={form}
      initialData={{
        list: [
          {
            a: 'bj',
            b: [{ c: 'bj' }],
          },
        ],
      }}
    >
      <FormList name="list">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name }, listIndex) => (
              <FormItem key={key}>
                <FormItem name={[name, 'a']} label="a">
                  <Input />
                </FormItem>
                <FormList name={['list', name, 'b']}>
                  {(fields) => (
                    <>
                      {fields.map(({ key, name }, bIndex) => (
                        <FormItem key={key}>
                          <FormItem name={[name, 'c']} label="c">
                            <Input />
                          </FormItem>
                          <Button
                            size="small"
                            theme="default"
                            onClick={() => handleUpdateWithSetFields(listIndex, bIndex)}
                          >
                            用setFields更新此项
                          </Button>
                        </FormItem>
                      ))}
                    </>
                  )}
                </FormList>

                <FormItem>
                  <MinusCircleIcon size="20px" onClick={() => remove(name)} />
                </FormItem>
              </FormItem>
            ))}
            <FormItem>
              <Space>
                <Button
                  onClick={() =>
                    add({
                      a: 'bj',
                      b: [{ c: 'bj' }],
                    })
                  }
                >
                  新增指定项
                </Button>
                <Button onClick={() => handleUpdateSpecificItem(0)}>用setFieldsValue更新</Button>
                <Button onClick={handleBatchUpdateWithSetFields}>用setFields批量更新</Button>
              </Space>
            </FormItem>
          </>
        )}
      </FormList>
    </Form>
  );
}

📝 更新日志

  • fix(Form): 修复嵌套 FormList 无法使用 setFields 更新表单的问题

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 31, 2025

tdesign-react-demo

npm i https://pkg.pr.new/tdesign-react@3930

commit: da3a716

@github-actions
Copy link
Contributor

github-actions bot commented Oct 31, 2025

完成

@RylanBot RylanBot force-pushed the rylan/fix/form/nest branch from 14e432a to 26d8253 Compare October 31, 2025 08:49
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the form utility functions and improves TypeScript type safety while adding support for nested FormList field access. The changes primarily focus on renaming getMapValue to findFormItem, adding a new findFormItemDeep function for recursive searches, and enhancing type definitions throughout the form components.

Key changes include:

  • Renaming getMapValue to findFormItem with a more descriptive name and documentation
  • Adding findFormItemDeep function to support finding FormItems in nested FormList structures
  • Improving TypeScript type annotations across FormItem interface methods and function parameters
  • Updating error messages from Chinese to English for internationalization

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File Description
packages/components/form/utils/index.ts Renamed getMapValue to findFormItem, added findFormItemDeep for nested FormList support, improved documentation
packages/components/form/hooks/useInstance.tsx Updated function calls to use renamed utilities, enhanced error messages, improved type annotations, and refactored getValidateMessage for better structure
packages/components/form/FormList.tsx Added formListMapRef property to FormItemInstance for nested field access
packages/components/form/FormItem.tsx Enhanced TypeScript type definitions for FormItemInstance interface methods and improved parameter type annotations

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@RylanBot RylanBot force-pushed the rylan/fix/form/nest branch 3 times, most recently from 51ff027 to 72e99af Compare October 31, 2025 09:56
@RylanBot RylanBot force-pushed the rylan/fix/form/nest branch from 72e99af to da3a716 Compare October 31, 2025 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants