javascript - 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,
    })
}

为了确定滑动是向上还是向下滑动，我调用了另一个函数，该函数获取起始位置并删除当前位置。我还将其与 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);
    }
}

问题

这可以很好地检测向上和向下滑动，但在用户第一次滑动时，console.log返回none<的原始状态 (与 up 或 down 相对)。

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

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

向上//无
向上//向上
向下//向上
向下//向下

如果我没有很好地表达我的问题，我深表歉意。 Here's a link to a CodePen您可以在其中更详细地查看问题(您需要手机或模拟器才能查看触摸事件)。

这里还有 a link to a post我一直在关注这个功能以使此功能正常工作。

任何指示将不胜感激。谢谢!

Answer 1

这里是固定 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))
}

唯一的“问题”是你假设 setState是同步的，因此在调用后立即检查状态值，而它不是。如果您想在 setState 完成后检查状态值 - 使用其第二个参数来传递回调函数。