前言
使用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></>
)
}