redux-form-checkboxesの配列

Question

私は、1つのことを除いて、動作する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" />、私が期待する何をするものではありません。さらに、チェックボックスをオンにすると、アレイのそれぞれがチェックされます。

だから私は、提出されたときにチェックボックスが期待どおりに動作しますが、今度の結果でそのデータにするもの

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

に<Field />のname属性を変更：

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

だから私の質問があります：チェックボックス、特に名前の作成に間違っているのですか？または、初期化時と送信時にもう一度データを変換する必要がありますか？

データを変換する必要がある場合は、どこに最適な場所ですか？

Answer 1

チェックボックス/項目の配列を以下のようにレンダリングし、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> 
    ); 
    }) 
} 

Answer 2

これは私がやってしまったものです：

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

これは、出力データ構造としてあなたのオブジェクト（というよりも、アレイ）を提供します。あなたが求めているものではありませんが、便利です（そして、IMO、値を削除する必要があるときに配列を検索する必要がある他のオプションよりも自然です）。代わりに[120, 231]得ることのあなたがtruthy値を持つキーを見つけることによって配列に変換したい場合は、それがonSubmit()を行う簡単なことだ

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

を取得します。私はlodashを使用しています：_.keys(_.pickBy(itemValue))変換をきちんと行います。