代码示例

在表单中，如果一个组件需要动态生成多个子组件，且其中有些字段适用于所有子组件，有些字段只适用于特定子组件，在 Antd 中实现该功能会出现问题。一个可能的解决方法是将所有子组件都作为数组项、并使用特定的配置对象来管理该数组，如下所示：

import { Form, Input, Select } from 'antd';

const { Option } = Select;

const configObj = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const Demo = () => {
  const [form] = Form.useForm();

  const onAddField = () => {
    const values = form.getFieldsValue();
    const nextKey = values['keys'].length + 1;
    const lastValue = values['keys'][values['keys'].length - 1];
    const lastFieldKey = `fields[${lastValue}]`;
    form.setFieldsValue({
      keys: [...values['keys'], nextKey],
      [`${lastFieldKey}.name`]: '',
      [`${lastFieldKey}.age`]: '',
      [`${lastFieldKey}.sex`]: '',
    });
  };

  const onRemoveField = (fieldIndex: number) => {
    const values = form.getFieldsValue();
    const nextKeys = values['keys'].filter((_, i) => i !== fieldIndex);
    form.setFieldsValue({
      keys: nextKeys,
    });
  };

  return (
    

      
        {(fields) => (
          <>
            {fields.map((field, index) => {
              const formFieldsKey = `fields[${index}]`;
              return (