表行被删除但值仍然存在

Question

我已经建立了一个表格，用户可以在其中进行一些计算，但是当任何行被删除时，输入的值会出现在它下面的行中，下一行的值会出现在它下面，依此类推。 我想要的是用户删除任何应该使用输入的值完全删除的行，下一行应该用自己的值代替它。

图片 1：我在图片中看到的前两行中输入了值。 [1]：https://i.stack.imgur.com/wWUBE.png

图 2：我删除了第一行，但您可以看到它的值仍然存在。 [2]：https://i.stack.imgur.com/HuOuA.png

App.js

 const [NewRow2, setNewRow2] = useState(data);

  const [IntensificationRatio, setIntensificationRatio] = useState(0)

  const [editFormData, setEditFormData] = useState({
    Injection_Speed: "",
    Fill_Time: "",
    Peak_Inj_Press: "",
    Viscosity: "",
    Shear_Rate: ""
  })

  const [isRowId, setIsRowId] = useState(null)


  const handleEditFormChange = (event) => {

    event.preventDefault();

    const fieldName = event.target.getAttribute("name");

    const fieldValue = event.target.value;

    const newFormData = { ...editFormData };

    newFormData[fieldName] = fieldValue;

    setEditFormData(newFormData);
  }


  const handleEditFormSubmit = (event) => {
    event.preventDefault();

    const editedValue = {
      id: isRowId,
      Injection_Speed: editFormData.Injection_Speed,
      Fill_Time: editFormData.Fill_Time,
      Peak_Inj_Press: editFormData.Peak_Inj_Press,
      Viscosity: editFormData.Fill_Time * editFormData.Peak_Inj_Press * IntensificationRatio,
      Shear_Rate: 1 / editFormData.Fill_Time,
    }

    const newValues = [...NewRow2];

    const index = NewRow2.findIndex((value) => value.id === isRowId)

    newValues[index] = editedValue;

    setNewRow2(newValues);

  }

 const deleteRow2 = (id) => {
    const updatedRows = [...NewRow2].filter((rowId) => {
      return rowId !== id;
    });
    setNewRow2(updatedRows);
  };

HandlEditchange 和 HandleEditSubmit 是处理在行中输入的数据和 deleteRow2 用于删除行的两个函数。

表格行的

 <tr onClick={() => setId(NewRow.id)}>

 <td> {rowId} </td>

 <td> <input type='text' className="form-control" name="Injection_Speed" onChange={handleEditFormChange}/> </td>

 <td> <input type='text' className="form-control" name="Fill_Time" onChange={handleEditFormChange}/> </td>

 <td> <input type='text' className="form-control" name="Peak_Inj_Press" onChange={handleEditFormChange}/> </td>

<td> <i className="fa fa-trash viscocity_icons" onClick={() => deleteRow2(NewRow.id)}></i> </td>
        </tr>

CodeSandBox 链接：您可以在这里查看休息。

https://codesandbox.io/s/focused-gauss-lql7r?file=/src/Edit.js

Answer 1

我发现了一些问题。

1. handleEditFormChange 没有更新 NewRow2 状态。你可以像下面这样修复它。需要将行 id 与事件一起传递。

  const handleEditFormChange = (event, id) => {
    event.preventDefault();

    setNewRow2((prevState) => {
      return prevState.map((item) =>
        item.id === id
          ? { ...item, [event.target.name]: event.target.value }
          : item
      );
    });
  };

1. 需要更改onChange 处理程序，如下所示。

onChange={(e) => handleEditFormChange(e, NewRow.id)}

1. 需要将NewRow2 中的值绑定到每个输入。

value={NewRow.Injection_Speed}

Fill_Time、Peak_Inj_Press 相同

4. deleteRow2 应该在过滤时正确使用 id。

  const deleteRow2 = (id) => {
    const updatedRows = NewRow2.filter((item) => {
      return item.id !== id;
    });
    setNewRow2(updatedRows);
  };

5. 在onClick 处理程序中传递要删除的行的id。

onClick={() => deleteRow2(NewRow.id)}

代码沙箱 => https://codesandbox.io/s/stoic-hopper-zi8mw?file=/src/Edit.js:2738-2775