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 }}