React Hooks的油门触摸事件

Question

我有一个div，当我向上拖动手指时，我希望div中的数字增加。

当我向下拖动手指时，我希望里面的数字减少。

使用触摸事件实现这一点相当简单。

代码沙盒就在这里——我试着让它尽可能简单！Codesandbox

我遇到的问题是，事件发生得很快，这使得很难降落在特定的数字上。如果能使用lodash节流功能来节流，那将是一件很棒的事情，但在这里我遇到了问题！什么都没发生！

我试过这样使用useRef:

const throttledPosition = useRef(throttle(touchPosition => touchPosition, 200)).current;

再说一遍，什么也没发生。

Answer 1

第1部分-限制事件处理程序

您的第一个问题是由使用_.throttle()的方式引起的，理想情况下应该将其封装在事件处理程序回调中。

请查看lodash.throttle() docs中的示例以供使用参考。

看看这个SO问题，它可能会让你对在React Hooks中使用油门有更多的了解。

关键的变化是用throttle包装事件回调。

const throttledSetPosition = throttle(event => {
if (event.touches[0].clientY) {
if (slider.current.contains(event.target)) {
setTouchPosition(Math.round(event.touches[0].clientY));
}
} else {
setTouchPosition(null);
}
}, 200);
const handleTouchMove = useCallback(throttledSetPosition, [touchPosition]);

第2部分-增值/减值

要实现增加/减少显示值的目标，首先需要确定一个刻度。您想要显示的最大最小值是多少？让我们使用100，因为这很容易理解。

然后你需要计算的是用户当前触摸的100的百分比，但相反(因为越靠近顶部就越接近100，越往下就越靠近0(。

要做到这一点，你可以使用以下方法：

// Define the scale
const scale = 100;
// Extract needed variables from event touches array
const {
clientY,
target: { offsetHeight, offsetTop }
} = event.touches[0];
// Calculate the percentage
const percentage = (clientY - offsetTop) / offsetHeight;
// Make the calculation to be reversed by subtracting the percentage from the scale...
const currentValue = scale - (percentage * scale);
// Set the display value
setTouchPosition(Math.round(currentValue));

我用上面的改动把你的沙箱叉在这里了。