删除单击事件添加的事件侦听器，不在useEffect中

Question

我有一个由组件呈现的表。

在每笔交易中，我都有onClick功能

<table>
  <tbody>
    <tr>
      <td onClick={handleClick}>a</td>
      <td onClick={handleClick}>a</td>
      <td onClick={handleClick}>a</td>
    </tr>
  </tbody>
</table>

在handleClick函数上，我添加了3个更多的事件侦听器：下移，mousemove，mouseup以跟踪要选择的鼠标

handleClick = (event) => {
  const mousedown = (e) => {...}
  event.target.addEventListener("mousedown", mousedown)
  const mousemove = (e) => {...}
  const mouseup = (e) => {
    document.getElementById("tbl").removeEventListener("mousemove", mousemove);
  }
  document.getElementById("tbl").addEventListener("mousemove", mousemove);
  document.getElementById("tbl").addEventListener("mouseup", mouseup);
}

问题是：每次单击后我都无法删除mouseup事件，因此有很多重复的mouseup事件，如下所示：

我尝试在handleClick末尾使用与useEffect类似的方法：

return () => document.getElementById("tbl").removeEventListener("mouseup", mouseup);

但似乎不起作用

您能帮我解决这个问题吗？非常感谢

Answer 1