React + antd 实现动态表单添加删除功能

类似下面这种功能：

 

 

 

 点击添加表增加一行，删除表删除一行，

思路：将这个表单抽成一个单独的组件，维护一个时间戳数组，这个数组的作用就是通过map循环来生成动态表单，每次点击添加就在数组里添加一个时间戳。最终遍历有几个item就渲染几个表单。

实现：

dynamic.js 动态表单 子组件

import React from 'react'; import { Select } from 'antd'; export default function DynamicForm(selectOptions1, selectOptions2) { return ( <>
            <span>业务线分组：</span>
            <Select defaultValue="1" style={{ width: 120, marginRight: 20 }} options={selectOptions1}>
            </Select>
            <span>数据库：</span>
            <Select defaultValue="1" style={{ width: 120, marginRight: 20 }} options={selectOptions2}>
            </Select>
            <span>表名称：</span>
            <Select defaultValue="1" style={{ width: 120, marginRight: 20 }} options={selectOptions2}>
            </Select>
        </>
 ); }

index.js  父组件

/* eslint-disable multiline-ternary */ import React, { useState, useEffect} from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Form, Input, Button, Radio, Select } from 'antd'; import {getRuleDetailApi} from '../../api/rule.api'; import '../../assets/common.less'; import dynamicForm from './DynamicForm'; const { Option } = Select; export default function AddNewMonitorRule(props) { const history = useHistory(); const location = useLocation(); const [ruleType, setRuleType] = useState(1); const [dynamicFormItem, setDynamicFormItem] = useState([]); const handleRuleTypeChange = (e) => { setRuleType(e.target.value); }; // 添加表
    const addDynamicForm = (e) => { e.preventDefault(); const newDynamicForm = dynamicFormItem.concat([Date.now()]); setDynamicFormItem(newDynamicForm); console.log(newDynamicForm); }; // 删除表
    const removeDynamicFormItem = (index) => { let tempDynamicFormItem = [...dynamicFormItem];  // 先拷贝一份，再修改，直接修改原数组react会认为是没有变化，所以页面不更新
        tempDynamicFormItem.splice(index, 1); setDynamicFormItem(tempDynamicFormItem); // setDynamicFormItem((state) => {
        // console.log(state);
        // // let tempDynamicFormItem = state.concat(); // 先拷贝一份，再修改，直接修改原数组react会认为是没有变化，所以页面不更新react中数组,如果引用地址不变，是不触发重新渲染的，但是值是设置进去了
        // state.splice(index, 1);
        // return [...state];
        // });
 };return ( <Form className="container" labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
            <Form.Item label="表选择">
                <div> {dynamicForm(lineGropOptions, dataBaseOptions, tableNameOptions)} <Button onClick={addDynamicForm}>添加表</Button>
                </div>
                {dynamicFormItem.map((item, index) => { return ( <div key={item} style={{ marginTop: 20 }}> {dynamicForm(lineGropOptions, dataBaseOptions, tableNameOptions)} <Button onClick={() => { removeDynamicFormItem(index); }}> 删除表 </Button>
                        </div>
 ); })} </Form.Item>
        </Form>
 ); }

 

踩坑日记：

1.useState修改state数据不发生变化：

原因是在原数组上修改了，react检测不到变化，需要拷贝一份新的数组，修改完新数组，再用新数组修改state的值，也就是新旧state的引用地址必须不一样才行。

2.删除表，采用index作为key导致页面更新复用了之前的item，比如我打算删除第一个，但是因为  key = index === 0，react就会比较发现 之前和现在都有个 key === 0 的dom节点，那就会复用之前的dom，虽然页面上确实少了一项，但是你发现第一项被复用了，给人感觉就是删除了最后一项。