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

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 является областью действия, а не блоком, как ожидается. Лучшее объяснение можно найти здесь: https://stackoverflow.com/a/750506/368697

Одно решение, чтобы убедиться, ваш 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; 
}