含TextField与Grid的动态表单：如何向服务器传输及加载所有值？

嘿，我之前在做动态表单的时候也试过用Grid来承载同类型的重复字段，比如多手机号、多地址这种场景，踩过一些坑，现在把我实践下来的最佳方案分享给你，应该能解决你关于提交和回显的疑问：

不管是普通的TextField还是Grid里的动态字段，都绑定到同一个表单数据源对象上。这样提交时能一次性把所有数据发给服务器，编辑时也能直接用后端返回的数据回显，不用分开处理。

1. 设计合理的数据源结构 #

首先你的表单数据源要包含两部分：普通表单字段，以及一个数组字段用来存Grid里的动态数据。举个实际的例子：

// 初始表单数据（可以是空数组，也可以默认带一行让用户修改）
const formData = {
  userName: '',
  phoneList: [
    { id: Date.now(), number: '', type: 'home' }, // 用时间戳当唯一ID，避免重复
    { id: Date.now()+1, number: '', type: 'work' }
  ]
};

这里userName是普通TextField的字段，phoneList就是Grid要绑定的动态数组，每一个元素对应Grid的一行数据。

2. Grid与数据源的双向绑定 #

接下来要让Grid的每一行和数组元素实时同步，以React+Ant Design为例（其他UI库思路完全一致）：

• Grid的dataSource直接绑定formData.phoneList
• 每一行的输入框绑定对应数组元素的属性，修改时更新数据源：

// 处理手机号输入框的变化
const handlePhoneChange = (index, value) => {
  const updatedPhones = [...formData.phoneList];
  updatedPhones[index].number = value;
  setFormData({ ...formData, phoneList: updatedPhones });
};

// Grid的列配置
const columns = [
  {
    title: '手机号',
    dataIndex: 'number',
    render: (text, _, index) => (
      <Input 
        value={text} 
        onChange={(e) => handlePhoneChange(index, e.target.value)} 
        placeholder="请输入手机号"
      />
    )
  },
  {
    title: '号码类型',
    dataIndex: 'type',
    render: (text, _, index) => (
      <Select 
        value={text} 
        onChange={(value) => {
          const updatedPhones = [...formData.phoneList];
          updatedPhones[index].type = value;
          setFormData({ ...formData, phoneList: updatedPhones });
        }}
      >
        <Option value="home">家庭</Option>
        <Option value="work">工作</Option>
        <Option value="other">其他</Option>
      </Select>
    )
  },
  {
    title: '操作',
    render: (_, __, index) => (
      <Button 
        type="text" 
        danger 
        onClick={() => {
          // 删除当前行：过滤掉对应索引的元素
          const updatedPhones = formData.phoneList.filter((_, i) => i !== index);
          setFormData({ ...formData, phoneList: updatedPhones });
        }}
      >
        删除
      </Button>
    )
  }
];

// 添加新行的按钮
<Button 
  type="dashed" 
  onClick={() => {
    const newPhoneItem = { id: Date.now(), number: '', type: 'home' };
    setFormData({
      ...formData,
      phoneList: [...formData.phoneList, newPhoneItem]
    });
  }}
>
  添加手机号
</Button>

这样用户添加、删除、修改Grid里的内容时，都会实时同步到formData.phoneList，和普通TextField的更新逻辑完全统一。

3. 提交数据到服务器 #

提交的时候就非常简单了，直接把整个formData作为请求体发给后端就行：

const handleSubmit = async () => {
  try {
    // 这里可以先做表单校验，包括Grid里的每一行
    await axios.post('/api/user/submit', formData);
    alert('提交成功！');
  } catch (err) {
    console.error('提交失败：', err);
  }
};

后端收到的数据结构会是这样的：

{
  "userName": "张三",
  "phoneList": [
    { "id": 1690000000000, "number": "138xxxx1234", "type": "home" },
    { "id": 1690000000001, "number": "139xxxx5678", "type": "work" }
  ]
}

后端直接解析这个对象就能拿到所有表单数据，不需要额外处理Grid和普通字段的拆分。

4. 编辑时回显数据 #

当用户需要编辑已有数据时，后端返回的数据结构和上面提交的结构完全一致，你只需要把后端返回的数据直接赋值给formData即可：

// 从后端获取编辑数据
const fetchEditData = async (userId) => {
  const res = await axios.get(`/api/user/${userId}`);
  // res.data的结构和提交时的formData完全相同
  setFormData(res.data);
};

这样普通TextField会自动显示userName的值，Grid也会自动渲染phoneList里的所有行，每一行的输入框也会自动填充对应的值，完美实现回显。

几个注意点 #

• 一定要给Grid的每一行设置唯一的key（比如用我们定义的id字段），避免UI库渲染时出现混乱
• 表单校验时，别忘了遍历Grid的数组字段，对每一行的内容做校验（比如手机号格式是否合法）
• 如果后端要求动态字段的格式特殊（比如要转成字符串），可以在提交前做一次转换，比如JSON.stringify(formData.phoneList)，但尽量保持前后端数据结构一致，减少不必要的转换成本

内容的提问来源于stack exchange，提问作者jose