React+AntDesign实现Form表单的动态增加删除操作

效果示例

1. 原来效果

2. 点击+之后

实现说明

1. 此次开发需要用到动态生成多行表单，因为新老数据要兼顾，老数据是对象存储走的一个接口，新数据走的多行配置，对象数组存储，走的另一个接口，所以在展示上就需要区分下。
2. 注意这里默认了第一行不能删除，当然你也可以在变成多行的时候，给每一行都加上删除，但是为了避免数据被删成一行都不剩了，你需要处理下，要么在删成一行的时候禁止删除或者隐掉删除按钮，要么就在删除后要调接口的时候判断处理下，具体的得看需求来开发。
3. 因为这块的按钮有设置，如果配置的参数含有password字段（不区分大小写），这块也是不能做多行的。

代码附上

1. 表格渲染数据部分代码

//这块是将拿到的数据遍历后，拿到最底层的展示表单数据，进行判断，如果获取到对应的value是字符串，那就是单行数据，走老接口，如果是是对象数组，就那么就走新接口
if (typeof data[keyName][keyName2] === 'string') {
   
  <FormItem
    {
   ...formItemLayout}
    label={
   <React.Fragment>
      {
   /* 这里是你渲染在表单上的标签名 ，根据实际情况处理*/}
      {
   key}
    </React.Fragment>}
    key={
   key}
  >
    <Input
      type={
   !data[keyName].iconType ? /password/.test(key.toLowerCase()) ? 'password' : 'text' : 'text'}
      defaultValue={
   data[keyName][keyName2]}
      value={
   data[keyName][keyName2]}
      onChange={
   ctx.handleInputChange.bind(ctx, key2)}
    />
    {
   
      !/password/.test(key.toLowerCase()) && (
        <span className="operate-icon">
          <Icon className="plus-icon" type="plus" onClick={
   ctx.addItem.bind(ctx, key2)} />
        </span>
      )
    }
  </FormItem>
} else {
   
  if (Array.isArray(data[keyName][keyName2])) {
   
    <FormItem
      {
   ...formItemLayout}
      label={
   <React.Fragment>
        {
   /* 这里是你渲染在表单上的标签名 */}
        {
   key}
      </React.Fragment>}
      key={
   key}
    >
      {
   data[keyName].keyName2.map((item, index) => {
   
        return <FormItem key={
   index}>
          {
   data[keyName].keyName2.length > 1 ? (
            <Input
              type={
   !data[keyName].iconType ? /password/.test(key.toLowerCase()) ? 'password' : 'text' : 'text'}
              defaultValue={
   data[keyName][keyName2]}
              value=