React Naive 解决防止多次点击的解决方法
export default class TouchableOpacity extends Component {
render() {
return (
<TouchableOpacity activeOpacity={0.85}
style={style?style:{}}
onPress={this.debouncePress(this.props.onPress)}>
{this.props.children}
</TouchableOpacity>
)
}
debouncePress = onPress => () => {
const clickTime = Date.now()
if (!this.lastClickTime ||
Math.abs(this.lastClickTime - clickTime) > 1000) {
this.lastClickTime = clickTime
onPress()
}
}
}
将lastClickTime保存在合适的位置,确保重新render时也不会丢失!
将lastClickTime保存在this的属性里。触发render后,React会对组件进行diff,对于同一个组件不会再次创建,lastClickTime可以存下来。
另外,网上有的防止重复点击的方法是将lastClickTime保存在state里,由于setState会触发render,感觉多此一举。有的还利用了setTimeout,觉得对于简单的场景也没必要使用setTimeout。
React Naive 解决防止多次点击的解决方法的更多相关文章
- 深度解析开发项目之 05 - 解决textField编辑之后点击其他内容改变的问题
深度解析开发项目之 05 - 解决textField编辑之后点击其他内容改变的问题 问题的解决: 只需要给HeadeVIew加上这句代码
- event.preventDefault() 解决按钮多次点击 导致页面变大
event.preventDefault() 解决按钮多次点击 导致页面变大
- react元素获取e时,点击target为空的现象
今天呢,学习react过程中,我要获取一个元素的e, checkAll=(e)=>{ console.log(e) console.log(e.target) } render() { retu ...
- 解决VS2015中没有报表项(ReportViewer)的方法
作者:何时.微笑成了种奢求 VS2015中没有报表项(ReportViewer),怎么办?这篇文章主要为大家详细介绍了解决VS2015中没有报表项(ReportViewer)的方法,感兴趣的小伙伴们可 ...
- 解决应用商店错误代码0x80072efd、0x80131505的方法
解决应用商店错误代码0x80072efd.0x80131505的方法 使用win10系统的朋友应该都会经常使用应用商店这个程序吧?它是微软自带的软件下载程序!不过最近有位win10的朋友告诉小编,他的 ...
- 解决iReport打不开的一种方法
解决iReport打不开的一种方法 iReport版本:iReport-5.6.0-windows-installer.exe 系统:Win7 64位 JDK:1.7 在公司电脑安装没问题,能打开,但 ...
- 解决json日期格式问题的3种方法
这篇文章主要介绍了解决json日期格式问题的3种方法 ,需要的朋友可以参考下 开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后 ...
- 终于解决了IE8不支持数组的indexOf方法,array的IndexOf方法
/* 终于解决了IE8不支持数组的indexOf方法 */ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (el ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
随机推荐
- jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change
这个问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了. 查了一些资料,有些朋友 ...
- Hadoop学习笔记之三:DataNode
DataNode对ClientDatanodeProtocol.InterDatanodeProtocol两个协议接口进行了实现,通过ipc::Server向Client.其它DN提供RPC服务(参见 ...
- VMWare常用快捷键
VMWare常用快捷键 Ctrl-Alt-Enter 进入全屏模式 ctrl+alt+insert 退出全屏 Ctrl-Alt 返回正常(窗口)模式 Ctrl-A ...
- python使用super()调用父类的方法
如果要在子类中引用父类的方法,但是又需要添加一些子类所特有的内容,可通过类名.方法()和super()来调用父类的方法,再个性化子类的对应函数. 直接使用类名.方法()来调用时,还是需要传入self为 ...
- 注册登录二合一之bootstrap
来源 https://bootsnipp.com/snippets/featured/login-and-register-tabbed-form jquery插件 需导入bootstrap插件 这个 ...
- ORA-12052: cannot fast refresh materialized view
SQL> execute dbms_mview.refresh ('TX_FAIL_LOG_DAY_MV', 'f'); BEGIN DBMS_MVIEW.REFRESH ('TX_FAIL_L ...
- 从percona server 5.7换到mariadb 10.2
过去两年半一直推荐使用percona server,今天开始,因为一些mysql迟迟不不愿意支持的特性,打算换回mariadb 10.2了,具体哪些不说了,总之非常关键,mariadb都支持一两年了, ...
- py4CV例子2.5车牌识别和svm算法重构
1.什easypr数据集: ) ) ] all_label_list = temp[:, ] n_sample = , ) matcher = cv2.FlannBasedMatcher(flann ...
- 20145311王亦徐 《网络对抗技术》 MSF基础应用
20145311王亦徐 <网络对抗技术> MSF基础应用 实验内容 掌握metasploit的基本应用方式以及常用的三种攻击方式的思路 主动攻击,即对系统的攻击,不需要被攻击方配合,以ms ...
- 如何利用好github的问题
github对我来说真的是一个超好的平台,不过之前只是把它仓库来使用, 后来在大佬告诉我应该怎么使用github,今天就来总结下如何利用好github,让它发挥最大的威力. 1.把github当做百科 ...