ant design pro中如何实现group的联动的问题？

Question

问题描述

如何实现【字段】和【type】的联动？

尝试的解决思路：
通过ant design 的FormInstance 方法，监听form的改变，动态渲染其他关联的input;
antd form文档地址：点击

问题点

在valueType= 'group'时，回调函数的返回值form，没有返回当前的索引，导致无法动态切换,目前索引写死成 0;

在线演示，在线调试地址

https://codesandbox.io/s/sche...
欢迎大家fork调试

代码如下：

import React, { useState } from "react";
import type { ProFormColumnsType } from "@ant-design/pro-form";
import ProForm, { BetaSchemaForm, ProFormText } from "@ant-design/pro-form";
import { Form } from "antd";

type DataItem = {
  name: string;
  state: string;
};

export default () => {
  // 后端反回的数据，字段和类型的对应关系
  const data = [
    {
      fieldName: "字段1",
      fieldType: "type1",
      fieldValue: "value1"
    },
    {
      fieldName: "字段2",
      fieldType: "type2",
      fieldValue: "value2"
    }
  ];

  const data2 = [
    {
      fieldName: "字段11111",
      fieldType: "type1",
      fieldValue: "value1"
    },
    {
      fieldName: "字段2",
      fieldType: "type2",
      fieldValue: "value2"
    }
  ];

  const [
    startRemarkJsonsInitialValue,
    setStartRemarkJsonsInitialValue
  ] = useState(data);

  // 字段值的下拉菜单：通过data转换成组件对应的数据格式
  const fieldNameValueEnum = {
    字段1: {
      text: "字段1"
    },
    字段2: {
      text: "字段2"
    }
  };

  function getCurrentFieldType(fieldName) {
    let currentFieldType = null;
    data.forEach((item) => {
      if (item.fieldName === fieldName) {
        currentFieldType = item.fieldType;
      }
    });
    return currentFieldType;
  }

  const columns: ProFormColumnsType<DataItem>[] = [
    {
      title: "起始标记位",
      valueType: "formList",
      dataIndex: "startRemarkJsons",
      // initialValue:initialValue,  // 设置初始值
      columns: [
        {
          valueType: "group",
          columns: [
            {
              dataIndex: "fieldName",
              valueType: "select",
              width: "xs",
              formItemProps: {
                rules: [
                  {
                    required: true,
                    message: "此项为必填项"
                  }
                ]
              },
              fieldProps: {
                placeholder: "字段名"
                // onChange:function(value) {
                //   // setFieldName(value);
                // }
              },
              valueEnum: fieldNameValueEnum
            },
            {
              dataIndex: "fieldType",
              // valueType: 'text',
              // width: 'xs',
              // fieldProps: {
              //   placeholder: '字段类型',
              //   disabled:true,
              // },

              renderFormItem: () => {
                return (
                  <Form.Item noStyle shouldUpdate>
                    {(form) => {
                      console.log('问题点：但是这里没有返回index索引');
                      return (
                        <ProFormText
                          name="text"
                          // label={'当前选择的类型'}
                          value={`我的值是：${getCurrentFieldType(
                            form.getFieldValue("startRemarkJsons")[0][
                              "fieldName"
                            ]
                          )}`}
                          disabled
                        />
                      );
                    }}
                  </Form.Item>
                );
              }
            },
            {
              dataIndex: "fieldValue",
              valueType: "text",
              width: "xs",
              formItemProps: {
                rules: [
                  {
                    required: true,
                    message: "此项为必填项"
                  }
                ]
              },
              fieldProps: {
                placeholder: "字段值"
              }
            }
          ]
        }
      ]
    }
  ];

  return (
    <div>
      <ProForm
        size={"middle"}
        onFinish={async (values) => {
          console.log(values, "xz45545");
        }}
        onValuesChange={(values) => {
          console.log(values, "xz44545");
        }}
        initialValues={{
          startRemarkJsons: startRemarkJsonsInitialValue
        }}
        syncToInitialValues={true}
      >
        <BetaSchemaForm<DataItem>
          trigger={<a>点击我</a>}
          columns={columns}
          layoutType={"Embed"}
        />
      </ProForm>
    </div>
  );
};

参考资料：

• https://procomponents.ant.des...

Answer 1

测试成功（在线演示）： https://codesandbox.io/s/schema-biao-dan-forked-7lbuk?file=/App.tsx

问题分析：

没找到问题的原因，把问题的关注点一直放在Form.Item上，这只是单个的列表，索引应该去ant design pro文档找，文档地址

renderFormItem 第二个参数data虽然没有直接返回index索引，但是可以通过id解析出index;

     {
              dataIndex: 'fieldType',
              renderFormItem:(_,data)=>{
                const index=data  && data.id && data.id.split('_')[1] || 0;
                return (
                <Form.Item noStyle shouldUpdate>
                  {
                    ((form)=>{
                      return (
                        <ProFormText
                          name="text"
                          value={`我的值是：${getCurrentFieldType(form.getFieldValue('startRemarkJsons')[index] && form.getFieldValue('startRemarkJsons')[index]['fieldName'])}`}
                          disabled
                        />
                      )
                    })
                  }
                </Form.Item>
                )
              },
            },