Question

我有一个带有controlled input fields的React应用，目前我在尝试根据输入字段名称/路径构建对象并为其分配值时遇到问题。

说一个表单生成的输入为：

<input
    type="text"
    name="field_5b55440b965b1[value][1][field_5b554428965b2]"
    placeholder=""
    value="foo"
>

其名称为：field_5b55440b965b1[value][1][field_5b554428965b2]，值为foo

如何从这样的名称=>值对构建对象：

{
    field_5b55440b965b1: {
        value: [
            field_5b554428965b2: '',
            field_5b554428965b2: 'foo',
        ]
    }
}

目前，我拥有的解决方案是使用qs软件包。我用这样的方式构建对象：

$object = qs.parse(`${name}=${value}`, { arrayLimit: 0 });

在大多数情况下都是成功的：https://runkit.com/embed/pm2ha1inhj3o

但是如果值中包含&（与号），则失败：https://runkit.com/embed/qeczd27l5xr7

现在，我正在寻找其他可能的解决方案或软件包。有以下软件包：

https://www.npmjs.com/package/set-value-但仅允许.（点）路径

https://www.npmjs.com/package/form-serialize-但是您需要表单的DOM，而不是单个输入字段。

希望有人可以提供帮助。

此致

Answer 1

为什么不使用一些正则表达式从名称中提取所有级别，然后使用循环遍历列表来生成对象？

var levels = name.match(/regex/);
let $object = {}
let intermediate = $object
for(var i = 0; i < levels.length; i++) {
    intermediate[levels[i]] = (i === levels.length - 1) ? $value : {}
    intermediate = intermediate[levels[i]]
}

对不起，正则表达式，我还不够好，所以我希望让您检查一下。

创建具有属性的对象以反映其输入字段名称并分配其值

1 个答案: