Reactjs redux表格&x2014；复选框数组

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

在HTML/PHP中，可以编写如下内容：

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

这些输入的结果：

，这不是我所期望的。此外，选中复选框将选中每个数组

因此，我将

的name属性更改为

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

是什么使复选框按预期工作，但在提交时又反过来导致该数据：

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

所以我的问题是：我创建复选框（尤其是它们的名称）是错误的，还是必须在初始化时转换一次数据，在提交时再转换一次

---

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

您可以如下呈现复选框/项目的数组，并使用

onChange

事件跟踪选中的复选框。例如，在状态上使用

selectedItems

数组，并在

onItemChange

实现上添加/删除项。在表单提交处理程序中，您将拥有状态中可用的所有选中项

{
  items.map((item, index) => {
    return (
      <div className="checkbox" key={ index }>
        <label>
          <input type="checkbox"
            onChange={ this.onItemChange.bind(this, index) } />
            { item.name }
        </label>
      </div>
    );
  })
}

{
items.map（（项目，索引）=>{
返回(
{item.name}
);
})
}

这就是我最后要做的：

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

---

如果您想通过查找具有truthy值的键将其转换为数组，这是一件简单的事情

onSubmit（）

。我正在使用lodash:

。.keys（u.pickBy（itemValue））

很好地完成了转换。

删除值属性。旧的PHP方法是唯一的方法：）渲染函数中的绑定是一种不好的做法。在构造函数中执行。@Anarion这通常是正确的，但是在本例中，他通过一个项目数组映射并将onItemChange绑定到索引以使用输入值。这是一个常见的模式。@Splitty不是我建议的吗？这个@philipp运气好吗？它对我很有用

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

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