reactjs - Antd v4：如何添加嵌套?

Question

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

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

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

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

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

标签： reactjsantdant-design-pro

Answer 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);

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