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

[liudonghua123]

问题描述

参考 https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method 在Component中我写了一个高阶函数

  onClickTab = param => e => {
    if (this.state.currentTab !== param) {
      this.setState({
        currentTab: param
      })
    }
  }

然后在想绑定onClick事件

        <View className='swiper-tab'>
          <View
            className={`swiper-tab-item ${currentTab == 0 ? 'active' : ''}`}
            onClick={this.onClickTab(1)}
          >
            所有课程
          </View>
          <View
            className={`swiper-tab-item ${currentTab == 0 ? 'active' : ''}`}
            onClick={this.onClickTab(2)}
          >
            课程分类
          </View>
        </View>

复现步骤
如上面所说的代码

期望行为
可以正常工作

报错信息

修改  页面文件  src/pages/training
编译  页面文件  src/pages/training
错误  页面编译  页面D:\code\other\taroApp\src\pages\training编译失败！
Error: 组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX)，或使用 bind。
  -----
  failed to locate source
    at Object.codeFrameError (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\@tarojs\transformer-wx\lib\src\utils.js:230:12)
    at JSXExpressionContainer (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\@tarojs\transformer-wx\lib\src\class.js:344:39)
    at NodePath._call (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\index.js:114:17)
    at NodePath.visit (C:\Users\Liu.D.H\AppData\Local\Yarn\Data\global\node_modules\babel-traverse\lib\path\context.js:115:19)

[这里请贴上你的完整报错截图或文字]

系统信息

• 操作系统: Windows 10
• Taro 版本 v1.2.0-beta.14
• Node.js 版本 v11.2.0
• 报错平台 weapp

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[liudonghua123]

后来我使用这种方式解决

  onClickTab = param => e => {
    if (this.state.currentTab !== param) {
      this.setState({
        currentTab: param
      })
    }
  }

        <View className='swiper-tab'>
          <View
            className={`swiper-tab-item ${currentTab == 0 ? 'active' : ''}`}
            onClick={this.onClickTab.bind(this, 0)}
          >
            所有课程
          </View>
          <View
            className={`swiper-tab-item ${currentTab == 1 ? 'active' : ''}`}
            onClick={this.onClickTab.bind(this, 1)}
          >
            课程分类
          </View>
        </View>

[yuche]

写 curry 或者写匿名函数都不行，编译已经告诉你很清楚了，用 bind

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[liudonghua123]

@Taro-bot @yuche 谢谢