antd表单数据 如何动态设置,React + antd 实现动态表单添加删除功能

本文介绍了如何在React应用中使用Ant Design(antd)实现动态表单的添加和删除功能。通过创建一个动态表单子组件,维护一个时间戳数组来跟踪表单数量,并使用useState和useEffect管理状态。在添加和删除操作中,注意数组的正确操作以触发React的重新渲染。此外,还提到了在实现过程中遇到的问题,如修改state数据不更新及删除表单时key的使用误区。
摘要由CSDN通过智能技术生成

类似下面这种功能:

88a52783b9dea0d391c52d3c14935fe1.png

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

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

实现:

dynamic.js 动态表单 子组件

import React from 'react';

import { Select } from 'antd';

export default function DynamicForm(selectOptions1, selectOptions2) {

return (

<>

业务线分组:

数据库:

表名称:

>

);

}

index.js  父组件

/* eslint-disable multiline-ternary */

import React, { useState, useEffect} from 'react';

import { useHistory, useLocation } from 'react-router-dom';

import { Form, Input, Button,

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值