Antd v4：如何在<Form.List>中添加嵌套？

Posted 2023-03-07

【中文标题】Antd v4：如何在<Form.List>中添加嵌套？

【英文标题】：Antd v4: How to add nesting in <Form.List>?

【发布时间】：2020-08-20 15:41:37

【问题描述】：

我正在尝试创建类似结构的自定义网格。 该结构将由不同的行组成，每行可以有多个列。每列会有1-2个表单域。

在 Antd v4.2.0 中，我们有<Form.List /> 组件帮助我们创建动态表单。

我尝试使用它，它对于动态行部分很好，但我无法弄清楚如何在<Form.List> 内创建多个列，即<Form.List>

我也可以手动创建此网格，但我也想在此网格中利用表单验证。

我正在尝试创建的视觉表示：

【问题讨论】：

解决了吗？

我想的唯一解决方法是不要使用 并尝试使用老式嵌套数组：行数组中的列数组。 @Jaison。

谢谢，我也终于要回到老派的方法了，希望他们以后能想出解决办法……

【参考方案1】：

要在另一个<Form.List> 中添加嵌套的<Form.List> 元素，只需像任何其他嵌套的<Form.Item> 一样将嵌套列表添加到外部列表循环中。诀窍是正确设置嵌套的<Form.List> 名称属性，使用格式：<Form.List name=[field.name, 'nested-input-name']>。

作为示例，让我们使用嵌套列表扩展官方文档 (https://ant.design/components/form/#components-form-demo-dynamic-form-item) 中的动态表单示例。原始示例为“名字”和“姓氏”添加了字段，因此我们将为“昵称”添加一个嵌套列表。

import  Form, Input, Button, Space  from 'antd';
import  MinusCircleOutlined, PlusOutlined  from '@ant-design/icons';

const Demo = () => 
  const onFinish = values => 
    console.log('Received values of form:', values);
  ;

  return (
    <Form name="dynamic_form_nest_item" onFinish=onFinish autoComplete="off">
      <Form.List name="users">
        (fields,  add, remove ) => 
          return (
            <div>
              fields.map(field => (
                <>
                    <Space key=field.key style= display: 'flex', marginBottom: 8  align="start">
                      <Form.Item
                        ...field
                        name=[field.name, 'first']
                        fieldKey=[field.fieldKey, 'first']
                        rules=[ required: true, message: 'Missing first name' ]
                      >
                        <Input placeholder="First Name" />
                      </Form.Item>
                      <Form.Item
                        ...field
                        name=[field.name, 'last']
                        fieldKey=[field.fieldKey, 'last']
                        rules=[ required: true, message: 'Missing last name' ]
                      >
                        <Input placeholder="Last Name" />
                      </Form.Item>

                      <MinusCircleOutlined
                        onClick=() => 
                          remove(field.name);
                        
                      />
                    </Space>
                
                    <Form.List name=[field.name, 'nicknames']>
                        (nicknames,  add, remove ) => 
                          return (
                            <div>
                              nicknames.map(nickname => (
                                <Space key=nickname.key align="start">
                                  <Form.Item
                                    ...nickname
                                    name=[nickname.name, 'nickname']
                                    fieldKey=[nickname.fieldKey, 'nickname']
                                    rules=[ required: true, message: 'Missing nickname' ]
                                  >
                                    <Input placeholder="Nickname" />
                                  </Form.Item>

                                  <MinusCircleOutlined
                                    onClick=() => 
                                      remove(nickname.name);
                                    
                                  />
                                </Space>
                              ))

                              <Form.Item>
                                <Button
                                  type="dashed"
                                  onClick=() => 
                                    add();
                                  
                                  block
                                >
                                  <PlusOutlined /> Add nickname
                                </Button>
                              </Form.Item>
                            </div>
                          );
                        
                    </Form.list>
                </>
              ))

              <Form.Item>
                <Button
                  type="dashed"
                  onClick=() => 
                    add();
                  
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
;

ReactDOM.render(<Demo />, mountNode);

我保持官方文档的单一组件样式，但您可能希望在实际应用程序中将其分解为更小的组件。