Ant Design React多字段嵌套表单：权限网格按钮关联复选框实现

问题背景 #

使用Antd开发React表单，需提交以下结构的数据：

{
  "name": "Consultor",
  "description": "",
  "edit_permissions_grid": {
    "1": {
      "name": "Main menu",
      "description": "Menu features",
      "url": "/menu",
      "selected_permissions": {
        "add": true,
        "delete": false,
        "edit": false,
        "query": true,
        "download": false,
        "play": false
      }
    }
  }
}

已完成name和description字段的提交，但edit_permissions_grid的嵌套结构（视图按钮与对应权限复选框的关联保存）无法实现：当前通过后端数据渲染视图按钮，点击按钮展示对应权限复选框，但无法将选中的权限与对应视图关联保存。

解决方案：无需使用Form.List，直接通过嵌套字段路径绑定 #

edit_permissions_grid是对象键值对结构，而非动态数组，因此不需要用Form.List，直接利用Antd Form的嵌套字段路径绑定即可实现关联保存。

核心步骤 #

1. 构建表单初始值
   从后端获取视图数据后，提前将其转换为符合提交格式的嵌套结构，确保每个视图ID作为edit_permissions_grid的key，同时初始化selected_permissions的默认状态。

2. 绑定嵌套字段
   使用数组形式的name属性（如['edit_permissions_grid', view.id, 'selected_permissions', 'add']），将每个权限复选框与对应视图的权限字段绑定，Antd Form会自动维护完整的对象结构。

3. 控制权限面板显示
   通过状态管理每个视图的权限面板显示/隐藏，点击视图按钮时切换对应状态即可。

示例代码 #

import { Form, Button, Checkbox, Space } from 'antd';
import { useState } from 'react';

const PermissionForm = ({ initialViews }) => {
  const [form] = Form.useForm();
  const [visibleViews, setVisibleViews] = useState({});

  // 初始化表单值，匹配提交格式
  const initialValues = {
    name: '',
    description: '',
    edit_permissions_grid: initialViews.reduce((acc, view) => {
      acc[view.id] = {
        ...view,
        selected_permissions: {
          add: false,
          delete: false,
          edit: false,
          query: false,
          download: false,
          play: false
        }
      };
      return acc;
    }, {})
  };

  // 切换视图权限面板显示状态
  const toggleView = (viewId) => {
    setVisibleViews(prev => ({ ...prev, [viewId]: !prev[viewId] }));
  };

  const onFinish = (values) => {
    // 提交的values将包含完整的edit_permissions_grid结构
    console.log('提交数据:', values);
    // 执行后端提交逻辑
  };

  return (
    <Form form={form} initialValues={initialValues} onFinish={onFinish}>
      {/* 基础字段：name */}
      <Form.Item
        name="name"
        label="角色名称"
        rules={[{ required: true, message: '请输入角色名称' }]}
      >
        <input />
      </Form.Item>

      {/* 基础字段：description */}
      <Form.Item
        name="description"
        label="角色描述"
      >
        <textarea />
      </Form.Item>

      {/* 渲染视图按钮 */}
      <Space wrap style={{ margin: '16px 0' }}>
        {initialViews.map(view => (
          <Button key={view.id} onClick={() => toggleView(view.id)}>
            {view.name}
          </Button>
        ))}
      </Space>

      {/* 渲染对应视图的权限复选框 */}
      {initialViews.map(view => (
        visibleViews[view.id] && (
          <div key={view.id} style={{ padding: 16, border: '1px solid #e8e8e8', borderRadius: 4, marginBottom: 16 }}>
            <h4 style={{ margin: '0 0 12px 0' }}>{view.name} 权限设置</h4>
            <Space wrap>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'add']}>
                <Checkbox>新增</Checkbox>
              </Form.Item>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'delete']}>
                <Checkbox>删除</Checkbox>
              </Form.Item>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'edit']}>
                <Checkbox>编辑</Checkbox>
              </Form.Item>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'query']}>
                <Checkbox>查询</Checkbox>
              </Form.Item>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'download']}>
                <Checkbox>下载</Checkbox>
              </Form.Item>
              <Form.Item name={['edit_permissions_grid', view.id, 'selected_permissions', 'play']}>
                <Checkbox>播放</Checkbox>
              </Form.Item>
            </Space>
          </div>
        )
      ))}

      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default PermissionForm;

关键说明 #

• 嵌套字段绑定：Antd Form支持数组形式的name参数，精准定位到嵌套对象的某个属性，自动维护整个对象结构。
• 初始值结构匹配：必须提前构建好与提交格式一致的初始值，确保每个视图ID在edit_permissions_grid中存在，否则字段绑定会失效。
• 场景适配：Form.List适用于动态增删的数组场景，而此需求是固定（后端返回）的视图列表，属于对象键值对结构，直接用嵌套字段绑定更合适。

内容的提问来源于stack exchange，提问作者Francisco.js