zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    nodejs
    httpClient closeableHttpClient
    re(正则表达式)模块
    ConfigParser模块
    random和string模块
    常用文件操作模块json,pickle、shelve和XML
    time和datetime模块
    os、sys和shutil模块
    内建函数
    生成器、迭代器、装饰器
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/8950199.html
Copyright © 2011-2022 走看看