Программно добавляем обработчики для реагирования на обработчик формы

Question

Пытаясь сократить стандартный код, я пытаюсь добавить обработчики для общих полей формы в объект обработчика, который выделит поле с ошибкой, покажет некоторую ошибку и т. Д. Пока у меня есть это:

//FieldHelper.js
exports.withStandardStoreHandlers = function (storeObj, fields)
{

    for(var i = 0; i < fields.length; i++)
    {
        var f = fields[i];
        var midName = f.charAt(0).toUpperCase() + f.slice(1);

        storeObj.prototype["onUpdate" + midName] = function(event) {

            this[""+f] = event.target.value;
            this[f+"ValidationState"] = '';
            this[f+"HelpBlock"] = '';    
        };
    }
    return storeObj;
}

и затем в конце концов я создаю хранилище Alt, которое экспортируется таким образом:

export default alt.createStore(FieldHelper.withStandardStoreHandlers(AddressStore, "firstName", "lastName", "street"));

И он на самом деле добавляет методы "onUpdateFirstName", "onUpdateLastName" и т. Д., Но, к сожалению, все они используют поле, которое было передано последним. Так что в этом примере я набираю некоторые вещи в имя, но onUpdateFirstName изменяет текстовое поле улицы и его состояние проверки / блок справки.

Ясно, что решение состоит в том, чтобы как-то сделать копию переменных "f" и "midName", чтобы у каждого из динамически создаваемых методов onUpdateX было свое собственное значение вместо использования последнего доступного, но я просто не могу понять как это сделать в JavaScript. Желательно, чтобы это было как можно более обратно-совместимым способом, так как это будет на переднем конце.

Answer 1

Это связано с var в JavaScript быть функцией, а не блоком, как ожидает ваш код. Лучшее объяснение можно найти здесь: /questions/14745371/zakryitie-javascript-vnutri-tsiklov-prostoj-prakticheskij-primer/14745375#14745375

Одним из решений является убедиться, что ваш f объявляется внутри области действия функции на каждой итерации с помощью forEach:

//FieldHelper.js
exports.withStandardStoreHandlers = function (storeObj, fields)
{
    fields.forEach(function (f) {
        var midName = f.charAt(0).toUpperCase() + f.slice(1);

        storeObj.prototype["onUpdate" + midName] = function(event) {

            this[""+f] = event.target.value;
            this[f+"ValidationState"] = '';
            this[f+"HelpBlock"] = '';    
        };
    });
    return storeObj;
}