Question

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

在HTML / PHP中，人们可以这样写：

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

所以在Serverside上会收到一个这样的数组（假设每个框都被选中）：$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属性更改为

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))可以很好地完成转换。

Answer 2

您可以如下呈现复选框/项目数组，并使用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>
    );
  })
}

redux-form-checkbox的复选框

2 个答案: