如何使用TouchStartTouchEnd在Table ReactJS中交换位置

我对此的react 是相当新的.我目前有一个项目，可以在桌面上正常工作，我正在try 添加移动功能.我正在表格中显示一组对象，我希望用户能够在移动设备上使用touch 来切换表格中对象的位置.

当用户touch 一行时，我们可以说这是原点位置.下一次连续接触一行时，即为目标位置.我想让它工作，这样，它就会在接触到目的地位置时交换起点和目的地.

例如，我有一张桌子:

<table>
    <thead>
      <tr><th>Rank</th></tr>
    </thead>
    <tbody>
      <tr onTouchStart={(e) => handleTouchStart(e, rowObj)}}><td>Object 1</td></tr>
      <tr onTouchStart={(e) => handleTouchStart(e, rowObj)}}><td>Object 2</td></tr>
      <tr onTouchStart={(e) => handleTouchStart(e, rowObj)}}><td>Object 3</td></tr>
    </tbody>
</table>

我希望用户能够交换对象1和对象2在桌子上的位置.

这项预期的功能目前在大多数设备上都可以与Draggable、onDragStart和onDragEnd一起使用，但在移动设备上不能使用.我怀疑这与这里所描述的有关:

Is the react-draggable not support on mobile platform?个

我从上面的解决方案中想不出任何东西.

不幸的是，onTouchStart()和onTouchEnd()与onDragStart()和onDragEnd()的工作方式不同.这两种touch 功能都处理相同的对象，并不关心您的touch 在哪里结束.他们只关心你最初touch 的是什么物体.而拖动功能则更简单，因为dragStart与最初的点击交互，而dragEnd与光标结束的位置交互(因此，您只需交换它们).

我想我只能使用onTouchStart，因为onTouchEnd没有帮助，对于上面已经描述的功能(第二段).我让它几乎正常工作，但我遇到了useState()的问题.

我在第一次touch 开始时将第一行设置为useState，假设:

const (origin, setOrigin) = useState({})

const handleTouchStart = (e, rowObj) =>
{
    setOrigin(rowObj)
}

然后，我在handleTouchStart中第二次touch 时将其与rowObj互换，其中:

const handleTouchStart = (e, rowObj) =>
{
    if (origin !== undefined)
    {
        swap(origin, rowObj)
    }
    setOrigin(rowObj)
}

这是第一次奏效.问题是，在交换之后，useState仍然记得一个起源.因此，下一次touch 一行时，它会进行交换，并重复该行为.

因此，它不是: touch ，touch ，交换-touch ，touch ，交换-touch ，touch ，交换

现实: touch ，touch ，交换-touch ，交换-&>touch ，交换

我try 在交换后将原点设置为未定义，但不起作用.当我try 这样做时，掉期本身甚至都没有发生.此外，由于onouch chStart()的工作方式，您不能只有两个useState并交换它们.Onouch chStart()将覆盖这两个useState.