reactjs - redux-form——复选框数组

Question

我有一个 Redux 表单，它可以正常工作，除了一件事:我需要创建一个复选框数组，以便用户可以在多个选项之间进行选择。

在 HTML/PHP 中，人们会写这样的东西:

<form>
    …
    <input type="checkbox" name="item[]" value="120" />
    <input type="checkbox" name="item[]" value="231" />
    …
</form>

所以在服务器端会收到这样一个数组(假设每个框都被选中):$item = [120, 231] ，其中数组中的每一项对应于复选框的值。

像这样用 redux-form 做同样的事情:

let items = [{name:…, value:…}, …];

<form>
  {items.map(item => {
    <Field component="input" 
           type="checkbox"
           name={item.name + '[]'} 
           value={item.value}
  })}
</form>

这些输入的结果:<input type="checkbox" name="item[]" value="true" /> ，这不是我所期望的。此外，选中复选框，检查每个数组。

所以我更改了 <Field /> 的名称属性到

name={`item[${item.value}]`}

是什么让复选框按预期工作，但又会在提交时产生该数据:

 {
           //index: 0,   1,     ,…, 120, 121, …    ,231, …                      
     item: [undefinded,undefined,…,true,undefined,…,true,undefined,…]
 }

所以我的问题是:我是否错误地创建了复选框，尤其是它们的名称，或者是否必须转换数据，一次在初始化时，第二次在提交时？

如果我必须转换数据，哪里是最好的地方？

Answer 1

这就是我最终做的:

<Field component="input" 
      type="checkbox"
      name={`item.${item.value}`} />

这为您提供了一个对象(而不是数组)作为输出数据结构。这不是您所要求的，但它很方便(而且，IMO，比其他需要在需要删除值时搜索数组的选项更自然)。你得到的不是 [120, 231]

{
    120: true,
    231: true,
    165: false // be aware that things that have been checked, and then unchecked, will be explicitly marked false
}

如果您想通过查找具有真值的键将其转换为数组，只需执行 onSubmit() 即可。我正在使用 lodash:_.keys(_.pickBy(itemValue)) 可以很好地完成转换。