时间戳

首页 > 解决方案 > 如何修复另一个“不能将类作为函数调用”（非 React）

javascript - 如何修复另一个“不能将类作为函数调用”（非 React）

问题描述

我在 JS 中编写了一些代码来连接两个选择框，以便将它们作为范围选择。行为是当您选择下限时，较高的会在下限之前被禁用，反之亦然。而且我认为这是防止用户选择范围的上限且值低于所选下限的常见用户体验。

在使用 webpack 编译脚本并第一次单击选择框后，我在class FormHandler {之前的行中收到错误。

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

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

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

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

// 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()with 行中，let $select = $(this);应该替换 withlet $select = $(e.target);和避免this。

PS也许我需要以某种方式深入了解this...

标签： javascriptwebpacksymfony4es6-class

解决方案

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

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

function optionsRangeBoundsAdjust () { ... }

export { selectOptionsAdjust, optionsRangeBoundsAdjust };

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

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

推荐阅读