React JS 滑动功能无法按预期工作

Question

我正在尝试在我的应用程序中实现一些滑动功能，但我目前正在努力获得我想要的正确行为。

我有一个名为 onTouchStart 的函数，它将当前触摸对象的 clientX 和 clientY 位置保存到状态，如下所示：

touchStart(e) {
    const touchObj = e.touches[0];
    this.setState({
        startX: touchObj.clientX,
        startY: touchObj.clientY,
    })
}

用户开始在屏幕上移动手指后，我调用另一个函数onTouchMove，它保存当前的clientX和clientY位置：

touchMove(e) {
    const touchObj = e.touches[0];
    this.setState({
        currentX: touchObj.clientX,
        currentY: touchObj.clientY,
    })
}

然后为了弄清楚滑动是 up 还是 down 滑动，我调用了另一个函数，它获取起始位置并带走当前位置。我还将它与 150 的 threshold 进行比较，以确保它是一次真正的滑动，而不是长时间的滑动（如滚动）。这是它的样子：

touchEnd(e) {
    this.setState({
        touchStarted: false,
    })
    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) {
        this.setState({
            direction: this.state.startY > this.state.currentY ? "top" : "bottom",
        })
        console.log(this.state.direction);
    }
}

问题

这可以很好地检测 up 和 down 滑动，但是在用户第一次滑动时，console.log returns [=25 的原始状态=]（相对于 up 或 down）。

如何确保初始滑动始终设置为正确的方向？

问题继续存在，用户必须在相反方向滑动两次才能将状态保存到正在滑动的实际方向，如下所示：

向上//none
上//上
向下//向上
向下//向下

抱歉，如果我没有很好地阐明我的问题。 Here's a link to a CodePen 您可以在其中更详细地查看问题（您需要 phone 或模拟器才能查看触摸事件）。

这里还有 a link to a post，我一直在关注它以实现此功能。

任何指点将不胜感激。谢谢！

Answer 1

这里是link到固定的pen。

touchEnd(e) 
{
    var s = {
      touchStarted: false
    };

    if (Math.abs(this.state.startX - this.state.currentX) < this.state.threshold) 
    {
        s.direction = this.state.startY > this.state.currentY ? "top" : "bottom";
    }

    this.setState(s, () => console.log(this.state.direction))
}

唯一的 "problem" 是您假设 setState 是同步的，因此在调用后立即检查状态值，但事实并非如此。如果您想在 setState 完成后检查状态值 - 使用其第二个参数传递回调函数。

React JS 滑动功能无法按预期工作

React JS swipe functionality not working as expected

javascript

touch

swipe

reactjs

问题