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"));

它确实添加了＆＃34; onUpdateFirstName＆＃34;，＆＃34; onUpdateLastName＆＃34;等方法，但不幸的是它们都使用了最后传递的字段。所以在这个例子中，我将一些东西输入到名字中，但onUpdateFirstName修改了街道文本字段及其验证状态/帮助块。

显然，解决方案是以某种方式复制＆＃34; f＆＃34;和＆＃34; midName＆＃34;变量，因此每个动态创建的onUpdateX方法都有它们自己的值，而不是使用最后一个可用的，但我无法弄清楚如何在JavaScript中执行此操作。优选地，尽可能以向后兼容的方式，因为这将在前端。

Answer 1

这是因为JavaScript中的var是函数作用域而不是代码所期望的块作用域。可在此处找到更好的解释：https://stackoverflow.com/a/750506/368697

一种解决方案是使用forEach确保在每次迭代时在函数范围内声明f：

//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;
}

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

1 个答案: