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

Programmatically adding handlers to react form handler

本文关键字：程序 处理 响应 表单 编程 添加 方式      更新时间：2023-09-26

在试图减少样板代码，我试图添加处理程序的常见表单字段的处理程序，以处理程序对象，将突出显示坏字段，显示一些错误等。到目前为止，我有这个:

//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"answers"midName"变量，以便每个动态创建的onUpdateX方法都有自己的值，而不是使用最后可用的，但我只是不知道如何在JavaScript中做到这一点。最好以尽可能向后兼容的方式，因为这将是在前端。

这是由于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;
}
相关文章：