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

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 修改了街道文本字段及其验证 state/help 块。

显然，解决方案是以某种方式复制 "f" 和 "midName" 变量，这样每个动态创建的 onUpdateX 方法都会有自己的值，而不是使用最后一个可用，但我只是不知道如何在 JavaScript 中执行此操作。最好以尽可能向后兼容的方式进行，因为这将在前端进行。

Answer 1

这是因为 JavaScript 中的 var 是函数作用域，而不是代码所期望的块作用域。可以在这里找到更好的解释：

一个解决方案是通过使用 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;
}

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

Programmatically adding handlers to react form handler

javascript

flux

reactjs

react-alt