React js中点击按钮为嵌套数组内对象动态增删输入字段的实现方法

一、修复现有代码的绑定错误 #

你当前的Add按钮事件绑定存在问题，页面渲染时就会直接触发新增逻辑而非点击后触发，先修改对应代码：

<button onClick={() => handlepropositionTimeAddClick(i)}>Add</button>

二、实现propositionTimes的增删逻辑 #

遵循React状态不可变更新原则，两个方法实现如下：

删除方法 #

const handlepropositionTimeRemoveClick = index => {
  setIssue(prev => ({
    ...prev,
    // 过滤掉对应索引的项
    propositionTimes: prev.propositionTimes.filter((_, i) => i !== index)
  }))
};

新增方法 #

const handlepropositionTimeAddClick = () => {
  setIssue(prev => ({
    ...prev,
    // 末尾追加空的新对象
    propositionTimes: [...prev.propositionTimes, { propositionTime: "" }]
  }))
};

三、复用逻辑适配另外两个数组 #

不需要重复写三遍增删代码，封装通用增删方法即可适配propositionResponseTimes和analyzers：

// 通用新增方法：接收要操作的字段名、新增的空对象模板
const handleAdd = (field, newItem) => {
  setIssue(prev => ({
    ...prev,
    [field]: [...prev[field], newItem]
  }))
}

// 通用删除方法：接收要操作的字段名、待删除项的索引
const handleRemove = (field, index) => {
  setIssue(prev => ({
    ...prev,
    [field]: prev[field].filter((_, i) => i !== index)
  }))
}

使用时直接传入对应参数即可，示例：

• 新增propositionResponseTimes：onClick={() => handleAdd('propositionResponseTimes', { propositionResponseTime: "" })}
• 新增analyzers：onClick={() => handleAdd('analyzers', { analyzerName: "", analyzerHuaweiId: "" })}
• 删除对应项时同理，传入对应字段名和索引即可。

四、可选：复用输入框修改逻辑 #

如果需要统一处理三个数组的输入框变更，也可以封装通用onChange方法：

const onInputChange = (e, field, index) => {
  const { name, value } = e.target
  setIssue(prev => ({
    ...prev,
    [field]: prev[field].map((item, i) => 
      i === index ? {...item, [name]: value} : item
    )
  }))
}

以propositionTime输入框为例，使用时修改为：

onChange={e => onInputChange(e, 'propositionTimes', i)}

内容的提问来源于stack exchange，提问作者efnan