Как исправить другое «Невозможно вызвать класс как функцию» (не React) - PullRequest
Новая
       16

Как исправить другое «Невозможно вызвать класс как функцию» (не React)

0 голосов
/ 15 июня 2019

Я написал некоторый код в JS, чтобы соединить два поля выбора, чтобы сделать их выбором диапазона. Поведение таково, что когда вы выбираете нижнюю границу, верхняя становится недоступной прямо перед нижней границей, и наоборот. И я думаю, что это обычный UX для предотвращения выбора пользователем верхней границы диапазона с более низким значением, чем в выбранной нижней границе.

После того, как скрипт скомпилирован с веб-пакетом, и я делаю первый щелчок в окне выбора, я получаю сообщение об ошибке прямо перед class FormHandler {. 

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

Следующие клики отлично работают и ошибка исчезла.

Я предоставил веб-пакет глобально underscore и jquery переменных. Поэтому мне не нужно явно импортировать их в модули.

Что я сделал с проблемой: 1. проверил тот код без webpack но в чистом js-файле с включенным классом - работает. 2. попытался изменить статические функции на обычные и создать экземпляр класса с ключевым словом new в common.js - без результата и с той же ошибкой. 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); и избегать this.

P.S. Может быть, мне как-то нужно глубоко понять this ...

1 Ответ

0 голосов
/ 15 июня 2019

Скорее всего, речь идет не о вашем коде, а о конфигурации вашего веб-пакета.
Может быть, избежание использования класса в FormHandler.js поможет: 

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

function optionsRangeBoundsAdjust () { ... }

export { selectOptionsAdjust, optionsRangeBoundsAdjust };

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

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