Question

我正在尝试使用lodash.throttling来限制在Touchable Highlight中的onPress调用次数，使用以下代码，但没有一个有效：

 <TouchableHighlight
       onPress={throttle(this.onPressHandler,5000,{leading:true, trailing:false})}>

 <TouchableHighlight
       onPress={()=>throttle(this.onPressHandler,5000,{leading:true, trailing:false})}>

然而，当我把一个console.log放在＆＃34; onPressHandler＆＃34;功能，即使我快速连续点击TouchableHighlight，我看到该功能被多次调用。

我错过了什么？

Answer 1

尝试在callback方法上添加onPress，以便不会自动调用。

<TouchableHighlight
    onPress={() => throttle(this.onPressHandler,5000,{leading:true, trailing:false})}>

Answer 2

由于Sebastien对this问题的回答

，我得到了这个工作

答案谈到了React.js，但是React Native的概念也是类似的。

我将以下代码添加到构造函数中，并直接将onPress映射到onPressHandler

this.onPressHandler = throttle(this.onPressHandler, 5000, {leading:true, trailing:false});

Answer 3

另一种解决方案是使用此程序包中的<Throttle>组件：https://github.com/gmcquistin/react-throttle。在React Native应用程序中它可以正常工作（我目前在我的一个应用程序中使用它）。

用法：

import { Throttle } from 'react-throttle';

<Throttle time="5000" handler="onPress">
    <TouchableHighlight onPress={this.onPressHandler} />
</Throttle>

在React Native中使用Lodash进行限制

3 个答案: