如何修复另一个“不能将一个类称为函数”（非React）

Question

我在JS中编写了一些代码来连接两个选择框，使它们成为范围选择。 行为是在您选择下限时，较高的一个在下限之前变为禁用，反之亦然。 而且我认为通常的UX是防止用户选择范围的上限，其值低于选定的下限。

在使用webpack编译脚本之后，我首先单击一个选择框，我在类FormHandler {之前的行上得到了错误。

TypeError: Cannot call a class as a function
    at _classCallCheck (FormHandler.js:4)
    at HTMLDocument.FormHandler (form.js:34)

接下来的点击工作完美，错误消失了。

我提供了webpack全局underscore和jquery变量。 所以，我不需要在模块中显式导入它们。

我对这个问题做了什么：1。检查没有webpack的代码，但是在包含类的纯js文件中 - 工作。 2.尝试将静态函数更改为普通函数，并使用common.js的new关键字实例化该类 - 没有结果和相同的错误。 3.浏览互联网，只看到基于反应的答案。

// common.js

'use strict';

import FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});

// FormHandler.js

"use strict";

class FormHandler {
    /**
     * Adds to the selected option the "selected" attribute.
     */
    static selectOptionsAdjust () {
        $('select').on('change', e => {
            let $select = $(this);
            var $val = $select.val();

            _.each($select.children(), val => {
                let $theOption = $(val);

                if ($theOption.attr('selected') === 'selected') {
                    $theOption.removeAttr('selected');
                }

                if ($val === $theOption.val()) {
                    $theOption.attr('selected', 'selected');
                }
            });
        });
    }

    /**
     * Forbids to choose lower values in the high bound of the range than
     * the value that has been selected in the lower bound of the range.
     * Relates to the connected select tags, i.e. ranges.
     */
    static optionsRangeBoundsAdjust () {
        let $ranges = _.map($('form .range'), val => $(val));

        _.each($ranges, $range => {
            let $rangeLowSelectNode = $range.find('.range-scale-low select').eq(0);
            let $rangeHighSelectNode = $range.find('.range-scale-high select').eq(0);

            $rangeLowSelectNode.on('change', _.partial(setHighRangeAvailability, $rangeHighSelectNode));
            $rangeHighSelectNode.on('change', _.partial(setLowRangeAvailability, $rangeLowSelectNode));
        });
    }
}

export default FormHandler;

我希望它能在没有错误的情况下从第一个CHANGE事件运行到选择框，因为我不知道它为什么只出现一次然后消失。

解决方案（仅适用于此情况）

FormHandler.js在selectOptionsAdjust()中包含let $select = $(this); ，应该用let $select = $(e.target);代替let $select = $(e.target); 并避免this 。

PS也许我不知何故需要深入了解this ......

Answer 1

最有可能的不是你的代码，而是你的webpack配置。
也许避免在FormHandler.js中使用类会有所帮助：

// FormHandler.js
function selectOptionsAdjust () { ... }

function optionsRangeBoundsAdjust () { ... }

export { selectOptionsAdjust, optionsRangeBoundsAdjust };

// common.js
import * as FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});