Javascript 如何使用reactjs&；单击按钮删除表中的特定文本字段；材料界面

每当单击“特定行删除”按钮时，我想删除表中特定行上的文本字段，目前，我可以在单击“添加”按钮时添加文本字段，也可以在单击“删除”按钮时删除文本字段，但每当单击“删除”按钮时，所有文本字段都将被删除，而不是特定的文本字段。此外，“添加”图标需要位于最后一个文本字段的旁边，但目前我只能在打开它的情况下实现第一个文本字段。请有人帮帮我。我迄今为止所取得成就的形象

正如你们所看到的，我试图删除第一行的文本字段，但它会自动删除表中每一行的文本字段

工作代码沙盒：

---

有人能帮我一下吗？

我读了你的代码，它工作正常

要添加的一件事是单行中文本输入的索引

问题 当前，如果用户按+按钮三次，

addCustomFile

将向state.customRow添加三个元素。然而，这三个元素是相同的，彼此之间没有区别

这就是为什么

filter

功能（在按下X按钮时执行）将删除状态中的所有元素。customRow属于同一行

解决方案 我建议您向

state.customRow

的元素添加一个新属性，以区分同一行中添加的输入。例如，它可以是

insideRowIndex

，并且每个添加的输入可以具有递增整数（0,1,2,3,4…）

选中filter函数中的

insideRowIndex

将允许您仅删除想要删除的输入，而不删除属于同一函数的所有其他输入。

您正在添加多个自定义行，所有这些行都具有相同的

rowId

，因此，在筛选它们时，您删除的内容超出了您的需要

您还错误地将

newRow.rowId

与

this.state.customRow.rowId

进行了比较，后者当然是未定义的，因为它是一个数组，并将状态更新为将

customRow

嵌套到另一个数组中

handlingDeleteRow = (index, newRow) => {
  let newdel = this.state.customRow.filter(
    (newRow) => newRow.rowId !== this.state.customRow.rowId // <-- incorrect comparison
  );
  this.setState({
    customRow: [newdel] // <-- nest array in array
  });
  console.log(this.state.customRow);
};

删除时，请使用新的

guid

属性

handlingDeleteRow = (index, newRow) => {
  let newdel = this.state.customRow.filter(
    (row) => row.guid !== newRow.guid
  );
  this.setState({
    customRow: newdel
  });
};

演示

handlingDeleteRow = (index, newRow) => {
  let newdel = this.state.customRow.filter(
    (row) => row.guid !== newRow.guid
  );
  this.setState({
    customRow: newdel
  });
};