react 点击一行增加一行输入框，带删除功能的需求

在项目中碰到了如下图的需求，可以连续新增N组数据：

//定义一组空数据
const [rightsList, setRightsList] = useState<any[]>([
  { rightsNames: "", rightsIdCard: "" },
]);

// 新增一组事件
const handleAddRights = () => {
  if (rightsList.length < 10) {
    setRightsList([...rightsList, {}]);
  } else {
    return message.warning("最多只能添加10个产权人信息");
  }
};

// 删除事件 产权人姓名 和身份证
const handleDeleteRights = (index: number) => {
  const formValue = form.getFieldsValue();
  const list = [...rightsList];
  let nameObj = {} as any;
  list.forEach((item: any, i: number) => {
    if (i >= index) {
      let next = i + 1;
      nameObj["rightsNames" + i] = formValue["rightsNames" + next];
      nameObj["rightsIdCard" + i] = formValue["rightsIdCard" + next];
    }
  });
  list.splice(list.length - 1, 1);
  setRightsList(list);

  form.setFieldsValue({
    ...formValue,
    ...nameObj,
  });
};



//通过数据map循环渲染组件
{rightsList.map((ztem: any, index: number) => (
  <ProForm.Group key={index}>
    <ProFormText
      name={"rightsNames" + index}
      label={`产权人姓名${index + 1}`}
      width="md"
      placeholder="请输入产权人姓名"
      rules={[
        {
          required: true,
          message: "请输入产权人姓名",
        },
      ]}
    />
    <ProFormText
      name={"rightsIdCard" + index} //确认有
      label={`产权人证件号${index + 1}`}
      width="md"
      placeholder="请输入产权人证件号"
      rules={[
        {
          required: true,
          message: "请输入产权人证件号",
        },
      ]}
    />
    {index == 0 ? (
      <Button type="link" onClick={handleAddRights}>
        新增
      </Button>
    ) : (
      <Button
        type="link"
        onClick={(e) => handleDeleteRights(index)}
      >
        删除
      </Button>
    )}
  </ProForm.Group>
))}

//此表单数据提交时的数据处理：
// 产权人姓名和身份证参数 处理
let rightsNamesList = [] as string[];
let rightsIdCardList = [] as string[];
rightsList.forEach((item: any, index: number) => {
  rightsNamesList.push(values["rightsNames" + index]);
  rightsIdCardList.push(values["rightsIdCard" + index]);
});
params.rightsNames = rightsNamesList.join(",");
params.rightsIdCard = rightsIdCardList.join(",");
console.log("[ params ] 提交>----", params);

//如果需要涉及到表单回显，请看这里
// 产权人姓名和产权人身份证 回显
let rightsNamesObj = {} as any;
let rightsIdCardObj = {} as any;
let rights = [] as any[];
data.rightsNames?.forEach((name: string, index: number) => {
  rightsNamesObj["rightsNames" + index] = name;
  rightsIdCardObj["rightsIdCard" + index] = data.rightsIdCards
    ? data.rightsIdCards[index]
    : "";
  rights.push({});
});
setRightsList(rights);
if (data.rightsNames?.length == 0) {
  setRightsList([{}]);
}

 P.s:删除功能真的很烧脑，逻辑想了很久，代码实现写了很久，且看且珍惜！

最后来看一下数据提交时的数据格式叭

表单回显时后台返回的数据格式如下，请参考：