zoukankan      html  css  js  c++  java
  • Taro 采坑日常

     组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX),或使用 bind。

      组件中点击事件如下

    //  组件
    <AtListItem 
      key={i}
      isSwitch 
      switchIsCheck={ true } 
      onSwitchChange={ (e) => this.handleSwitchChange(e, i) }
     />
    
     // 方法
    handleSwitchChange = (e, i) => {
      console.log('e :', e)
      console.log('i :', i)
    }

      在H5端正常运行, 在小程序端时抛出了异常:

    // Error: 组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX),或使用 bind。

      写过 react 的同学都知道 这种写法在日常比较常见的, 这个异常 一开始 也是让我百思不得解

      最终解决方案如下:

      

    //  组件
    <AtListItem 
      key={i}
      isSwitch 
      switchIsCheck={ true } 
      onSwitchChange={ this.handleSwitchChange.bind(this, i) }
     />
    
     // 方法
    handleSwitchChange = (i, e) => {
      console.log('i :', i)
      console.log('e :', e)
      // 这里的参数顺序有所不同
         // 第一个参数为组件方法中 传入的索引值
      // 第二个参数为 this, 这个参数参数 在bind 时 不需要传入
    }

      这种写法 在 H5 已经 小程序端 输入达成统一, 此坑过~

  • 相关阅读:
    Nginx 部署多个 web 项目(虚拟主机)
    Nginx 配置文件
    Linux 安装 nginx
    Linux 安装 tomcat
    Linux 安装 Mysql 5.7.23
    Linux 安装 jdk8
    Linux 安装 lrzsz,使用 rz、sz 上传下载文件
    springMVC 拦截器
    spring 事务
    基于Aspectj 注解实现 spring AOP
  • 原文地址:https://www.cnblogs.com/vant850/p/10926743.html
Copyright © 2011-2022 走看看