如何删除React中通过map生成的指定动态表单项组件？

核心改造思路 #

你原来基于amount计数生成渲染数组的方案天然不支持删除指定项，因为计数仅能控制总数量，无法标记每个输入框的独立状态。正确方案是用结构化数组存储每个表单项的元数据（唯一ID、输入值等），所有增删操作直接修改该数组即可，不需要把组件存入状态。

具体实现步骤 #

1. 替换状态定义
   将原来的数字类型amount状态替换为数组类型的表单项状态：

import { useState } from 'react';
import { TextField, IconButton } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';

// 初始默认展示1个输入框
const [formItems, setFormItems] = useState([
  {
    id: Date.now(), // 用时间戳作为唯一ID，避免重渲key冲突
    value: ''
  }
]);

2. 实现新增输入框逻辑
   点击新增按钮时往数组末尾追加新的表单项：

const handleAdd = () => {
  setFormItems(prev => [
    ...prev,
    {
      id: Date.now() + Math.random(), // 加随机数避免快速点击生成重复ID
      value: ''
    }
  ]);
};

3. 实现指定项删除逻辑
   通过数组filter方法过滤掉需要删除的项即可，普通场景下直接用索引匹配即可：

// 入参为要删除项的数组索引
const handleDelete = (targetIndex) => {
  setFormItems(prev => prev.filter((_, index) => index !== targetIndex));
};

如果你的场景需要支持输入框拖拽排序，建议用ID匹配过滤避免索引混乱：

const handleDelete = (targetId) => {
  setFormItems(prev => prev.filter(item => item.id !== targetId));
};

4. 实现输入值同步逻辑
   绑定每个输入框的onChange事件，同步更新对应项的存储值，避免删除操作导致输入值错位丢失：

const handleInputChange = (targetIndex, e) => {
  setFormItems(prev => {
    const newItems = [...prev];
    newItems[targetIndex].value = e.target.value;
    return newItems;
  });
};

5. 渲染逻辑改造
   遍历formItems数组渲染输入框和删除按钮：

{
  formItems.map((item, index) => (
    <div key={item.id} style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
      <TextField
        value={item.value}
        onChange={(e) => handleInputChange(index, e)}
        label={`输入框${index + 1}`}
        variant="outlined"
      />
      {/* 至少保留1个输入框时可隐藏删除按钮，按需调整 */}
      {formItems.length > 1 && (
        <IconButton onClick={() => handleDelete(index)} color="error">
          <DeleteIcon />
        </IconButton>
      )}
    </div>
  ))
}

效果验证 #

按上述方案实现后，当有3个输入框时，调用handleDelete(1)即可删除第二个输入框，第一个和第三个的输入值不会出现错位丢失问题。

内容的提问来源于stack exchange，提问作者Mähnenwolf