antd Form.list嵌套Form.list

最新推荐文章于 2024-11-19 09:53:55 发布

原创最新推荐文章于 2024-11-19 09:53:55 发布 · 6.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#react #react.js

记录专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何使用Ant Design的Form组件创建一个动态表单，其中包括地区选择与对应的景点输入，实现了根据地区选择动态加载景点列表的功能。通过Form.List和Select组件的联动，用户可以增删子项并提交完整的表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

const { Option } = Select;

const areas = [
  { label: 'Beijing', value: 'Beijing' },
  { label: 'Shanghai', value: 'Shanghai' },
];

const sights = {
  Beijing: ['Tiananmen', 'Great Wall'],
  Shanghai: ['Oriental Pearl', 'The Bund'],
};

const Test: React.FC<any> = (props) => {
  const [form] = Form.useForm();

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

  const handleChange = () => {
    form.setFieldsValue({ sights: [] });
  };
  return (
    <Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
        <Select options={areas} onChange={handleChange} />
      </Form.Item>
      <Form.List
        name="sights"
        initialValue={[
          {
            test: [
              {
                price: '',
                name: '',
              },
              {
                price: '',
                name: '',
              },
            ],
          },
        ]}
      >
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Space key={field.key} align="baseline">
                <Form.List
                  {...field}
                  label="父"
                  name={[field.name, 'test']}
                  fieldKey={[field.fieldKey, 'test']}
                  initialValue={[
                    {
                      price: '',
                    },
                    {
                      name: '',
                    },
                  ]}
                >
                  {(testList, { add: addtest, remove: removetest }) => (
                    <>
                      {testList.map((testItem) => {
                        console.log(testItem);
                        return (
                          <Space key={testItem.key} align="baseline">
                            <Form.Item
                              {...testItem}
                              label="Price"
                              name={[testItem.name, 'price']}
                              fieldKey={[testItem.fieldKey, 'price']}
                              rules={[{ required: true, message: 'Missing price' }]}
                            >
                              <Input />
                            </Form.Item>
                            <Form.Item
                              {...testItem}
                              label="Name"
                              name={[testItem.name, 'name']}
                              fieldKey={[testItem.fieldKey, 'name']}
                              rules={[{ required: true, message: 'Missing name' }]}
                            >
                              <Input />
                            </Form.Item>
                            <MinusCircleOutlined onClick={() => removetest(testItem.name)} />
                          </Space>
                        );
                      })}

                      <Form.Item>
                        <Button
                          type="dashed"
                          onClick={() => addtest()}
                          block
                          icon={<PlusOutlined />}
                        >
                          填加子
                        </Button>
                      </Form.Item>
                    </>
                  )}
                </Form.List>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                添加外层
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Test;

示意图