javascript - 以编程方式添加处理程序以响应表单处理程序

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 修改了街道文本字段及其验证状态/帮助 block 。

显然，解决方案是以某种方式复制“f”和“midName”变量，以便每个动态创建的 onUpdateX 方法都有自己的值，而不是使用最后一个可用的值，但我可以不知道如何在 JavaScript 中做到这一点。最好以尽可能向后兼容的方式，因为这将在前端。

Answer 1

这是由于 JavaScript 中的 var 是函数作用域，而不是代码所期望的 block 作用域。可以在这里找到更好的解释: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;
}