javascript - 如何使用 reactjs 和 material ui 删除表中的特定文本字段 onclick of a button

Question

每当单击特定行删除按钮时，我想删除表内特定行上的文本字段，目前我能够添加文本字段 onclick of add button 并且我能够删除 textField onclick of remove button 但是每当单击删除按钮时，所有文本字段都会被删除，而不是特定的文本字段。此外，添加图标需要位于最后一个文本字段旁边，但目前我只能在第一个文本字段上实现它。请有人帮助我。到目前为止我所取得的成就的图片。

如您所见，我试图删除第一行的文本字段，但它会自动删除表格每一行中的文本字段。

工作代码和框:https://codesandbox.io/s/heuristic-fermat-63ixw?file=/src/App.js

谁能帮帮我

Answer 1

问题

您正在添加多个自定义行，所有这些行都具有相同的 rowId，因此当您过滤它们时，您将删除比您想要的更多的内容。

您还错误地将 newRow.rowId 与 this.state.customRow.rowId 进行了比较，这当然是未定义的，因为它是一个数组，并将您的状态更新为 nest 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 并与之匹配。

import { v4 as uuidV4 } from 'uuid';

...

addCustomFile = (index) => {
  this.setState({
    resError: null,
    customRow: [
      ...this.state.customRow,
      { rowId: index, fileData: false, fileName: false, guid: uuidV4() }
    ]
  });
};

删除时使用新的 guid 属性。

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

演示