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形式做同样的事情：

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))转换效果很好。