taro Hooks 使用vant组件事件无效

[hqman]

@yuche 大佬有空帮忙看看。

问题描述
taro Hooks 使用vant组件事件无效, 点击按钮 onClick回调函数没执行。
同样代码用class 组件是可以运行的。

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

function Test () {

  const add=() => {
    console.log('add click')
    
  }
  return (
    <View>
      <van-button  onClick={add}>
        确定
      </van-button>
    </View>
  );
};

Test.config = {
  navigationBarTitleText: "test",
  usingComponents: {
    "van-area": "../../components/vant-weapp/area/index",
    "van-button": "../../components/vant-weapp/button/index"
  }
};

export default Test;

• 操作系统: [mac]
• Taro 版本 [v.1.3.11]
• 报错平台 [ weapp]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

class Test extends Taro.Component {
  render () {
    const add=() => {
      console.log('add click')
      
    }
    return (
      <View>
        <van-button  onClick={add}>
          确定
        </van-button>
      </View>
    );
  }
}

你的代码和这份代码编译出来的结果没差别啊，想想看是不是漏了什么东西

[hqman]

class 组件生成的代码

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _class, _temp2;

var _index = require("../../npm/@tarojs/taro-weapp/index.js");

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Test = (_temp2 = _class = function (_Taro$Component) {
  _inherits(Test, _Taro$Component);

  function Test() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Test);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Test.__proto__ || Object.getPrototypeOf(Test)).call.apply(_ref, [this].concat(args))), _this), _this.$usedState = [], _this.config = {
      navigationBarTitleText: "商城",
      usingComponents: {
        "van-area": "../../components/vant-weapp/area/index",
        "van-button": "../../components/vant-weapp/button/index"
      }
    }, _this.customComponents = [], _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Test, [{
    key: "_constructor",
    value: function _constructor(props) {
      _get(Test.prototype.__proto__ || Object.getPrototypeOf(Test.prototype), "_constructor", this).call(this, props);

      this.$$refs = [];
    }
  }, {
    key: "_createData",
    value: function _createData() {
      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __isRunloopRef = arguments[2];
      var __prefix = this.$prefix;
      ;

      var add = function add() {
        console.log("add click");
      };
      this.anonymousFunc0 = add;
      Object.assign(this.__state, {});
      return this.__state;
    }
  }, {
    key: "anonymousFunc0",
    value: function anonymousFunc0(e) {
      ;
    }
  }]);

  return Test;
}(_index2.default.Component), _class.$$events = ["anonymousFunc0"], _class.$$componentPath = "pages/mall/index", _temp2);
exports.default = Test;

Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(Test, true));

<block wx:if="{{$taroCompReady}}">
    <view>
        <van-button bindclick="anonymousFunc0" __fn_onClick="{{true}}">确定</van-button>
    </view>
</block>


# Hooks 组件生成的代码

```index.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _class, _temp2;

var _index = require("../../npm/@tarojs/taro-weapp/index.js");

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Test = (_temp2 = _class = function (_Taro$Component) {
  _inherits(Test, _Taro$Component);

  function Test() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Test);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Test.__proto__ || Object.getPrototypeOf(Test)).call.apply(_ref, [this].concat(args))), _this), _this.config = {
      navigationBarTitleText: "test",
      usingComponents: {
        "van-area": "../../components/vant-weapp/area/index",
        "van-button": "../../components/vant-weapp/button/index"
      }
    }, _this.$usedState = [], _this.customComponents = [], _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Test, [{
    key: "_constructor",
    value: function _constructor(props) {
      _get(Test.prototype.__proto__ || Object.getPrototypeOf(Test.prototype), "_constructor", this).call(this, props);

      this.$$refs = [];
    }
  }, {
    key: "_createData",
    value: function _createData() {
      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __isRunloopRef = arguments[2];
      var __prefix = this.$prefix;
      ;

      var add = function add() {
        console.log("add click");
      };
      this.anonymousFunc0 = add;
      Object.assign(this.__state, {});
      return this.__state;
    }
  }, {
    key: "anonymousFunc0",
    value: function anonymousFunc0(e) {
      ;
    }
  }]);

  return Test;
}(_index2.default.Component), _class.$$events = ["anonymousFunc0"], _class.$$componentPath = "pages/mall/index", _temp2);


Test.config = { navigationBarTitleText: "test", usingComponents: { "van-area": "../../components/vant-weapp/area/index", "van-button": "../../components/vant-weapp/button/index" } };

exports.default = Test;

Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(Test, true));

//index.wxml
<block wx:if="{{$taroCompReady}}">
    <view>
        <van-button bindonclick="anonymousFunc0" __fn_onClick="{{true}}">确定</van-button>
    </view>
</block>

[hqman]

按错了 不小心close掉了

[hqman]

@yuche 大佬 打扰了。

昨天的问题,我终于找到原因了，问题出在编译wxml页面上。

<block wx:if="{{$taroCompReady}}">
    <view>
        <van-button bindonclick="anonymousFunc0" __fn_onClick="{{true}}">确定</van-button>
    </view>
</block>

bindonclick 改为 bindclick 就可以运行了。

[yuche]

你使用 class 的时候会编译为 bindclick 吗

[hqman]

@yuche class 组件是正常的 生成的是 bindxxx， 函数组件生成的是 bindonxxx。
目前我只能手动replace。

[yuche]

@yuche class 组件是正常的 生成的是 bindxxx， 函数组件生成的是 bindonxxx。
目前我只能手动replace。

生成正确的 class 代码能不能发一下

[taro-bot]

CC @yuche

[KeithZhang]

用class写法编译正确的结果是bindclick，而不是bindonclick，我也遇到这个问题
@yuche

[hqman]

有没有办法 零时先解决一下？

[yuche]

@yuche

发一下正确编译的源码来看看

[hqman]

@yuche

class 组件 和 function 组件生成的 代码 唯一区别在于 模板文件wxml 中的 bind 事件。

class 生成的wxml代码

<block wx:if="{{$taroCompReady}}">
    <view>
        <van-button bindclick="anonymousFunc0" __fn_onClick="{{true}}">确定</van-button>
    </view>
</block>

function 生成的wxml代码

<block wx:if="{{$taroCompReady}}">
    <view>
        <van-button bindonclick="anonymousFunc0" __fn_onClick="{{true}}">确定</van-button>
    </view>
</block>

修改建议

建议测试一下 function 组件中调用 vant 组件，目前生成的代码中事件绑定 都生成 bindonxxx。
只要改为bindxxx就可以运行, 多了 on。

[hqman]

类组件可以运行

class Test extends Taro.Component {
  render () {
    const add=() => {
      console.log('add click')
      
    }
    return (
      <View>
        <van-button  onClick={add}>
          确定
        </van-button>
      </View>
    );
  }
}

[hqman]

👍🐂