antd react ts 双重循环嵌套可增减表单

---

前言

使用react 函数式组件来写一个双重循环嵌套可增减的表单

---

效果图

静态

动态

代码如下

import { CloseOutlined, MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select } from 'antd';
import React, { useState } from 'react'


const { Option } = Select;

export default function AddItem() {
  // pages结构：[[{id:随机数},{id:随机数}],[],[]]  代表有三个策略，第一个策略中有两个条目
  const [pages, setPages] = useState([[]])


  return (
    <>
      <Form>
        {/* 遍历pages 数组个数对应着策略组数 */}
        {pages.map((item, index) => {
          return (
            // 一个组中的内容如下
            <div key={index}>
              <Row style={{ marginLeft: 200 }}>
                <Col xs={{ span: 24 }} sm={{ span: 4 }}> <span>策略{index + 1}：</span></Col>
                <Col xs={{ span: 24 }} sm={{ span: 13 }}>
                  {item && item.length > 0 ? (   //每个策略中的条目大于0就展现条目 没有得话就展现「新增数据配置」
                    <div>
                      <Form.Item label=' ' colon={false}>
                        {item?.map(({ id }) => {
                          return (
                            <div key={id}>
                              <Form.Item label=' ' colon={false}>
                                <Input.Group compact>
                                  <Form.Item>
                                    <Select style={{ width: 200 }}>
                                      <Option value="Zhejiang">Zhejiang</Option>
                                      <Option value="Jiangsu">Jiangsu</Option>
                                    </Select>
                                  </Form.Item>
                                  <Form.Item>
                                    <Input style={{ width: 200 }} />
                                  </Form.Item>
                                  <Form.Item>
                                    <PlusCircleOutlined style={{ marginLeft: 20 }} onClick={() => {
                                      // 添加条目数  找到该条目所在组数 然后添加一个条目（添加一个代表条目数的对象{id:随机数}）随机数是为了保持条目的唯一性
                                      pages[index] = pages[index].concat([{ id: Math.random() }])
                                      setPages([...pages])
                                    }} />
                                    <MinusCircleOutlined style={{ marginLeft: 20 }} onClick={() => {
                                      // 删除策略组中的某一条目
                                      const p = pages[index].filter(item => item.id !== id)
                                      pages[index] = p
                                      setPages([...pages])
                                    }} /></Form.Item>
                                </Input.Group>
                              </Form.Item>

                            </div>
                          )
                        })}


                      </Form.Item>
                    </div>)
                    :
                    <Form.Item label=' ' colon={false}>
                      <Button type="dashed" block icon={<PlusOutlined />} style={{ width: 200 }} onClick={() => {
                        // 添加策略组中的条目
                        pages[index] = pages[index].concat([{ id: Math.random() }])
                        setPages([...pages])
                      }}>新增数据配置</Button><CloseOutlined style={{ marginLeft: 20 }} onClick={() => {
                        // 删除当前策略组
                        const p = pages.filter((item, itemIndex) => index !== itemIndex)
                        setPages([...p])
                      }} />
                    </Form.Item>
                  }
                </Col>
              </Row>
            </div>

          )
        })}

        <Form.Item label=' ' colon={false} labelCol={{ span: 4 }} wrapperCol={{ span: 13 }}>
          <Button type="dashed" block icon={<PlusOutlined />} style={{ width: 600 }} onClick={() => {
            //  点击按钮增加组数
            setPages(pages.concat([[]]))
          }}>新增策略</Button>
        </Form.Item>
      </Form></>
  )
}