2016-12-30 28 views
0

私はReactjsのボタンをクリックしながらオブジェクトを押しています。最初は "LOCAL"、 "GLOBAL"、 "MAIN"のような3種類のオブジェクトを持っています。これらの名前をonclockコールバックのパラメータとして渡しています。 reactJsで重複を挿入するのを避けるには?reactJsのオブジェクトの配列で重複を削除するには?

コードをレンダリングするマイ、

<div> 
    <input type="checkbox" onClick={this.checkedIn.bind(this, "LOCAL", "12")} /> 
    <button type="checkbox" onClick={this.checkedIn.bind(this, "GLOBAL", "15")} /> 
    <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "11")} /> 
    <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "13")} /> 
</div> 

のonclickイベント

var objectVale = []; 
checkedIn(type, value) { 
    objectVale.push({ 
    type:type, 
    value:[value] 
    }) 
} 

期待出力、

[ 
    { 
    "type":"LOCAL", 
    "value":[12] 
    }, 
    { 
    "type":"GLOBAL", 
    "value":[15] 
    }, 
    { 
    "type":"MAIN", 
    "value":[11, 13] 
    } 
] 

答えて

1

あなたはこのような何かを試みることができる:

var objectVale = []; 
checkedIn(type, value) { 

    var index = objectValue.findIndex(function(obj){ return obj.type === type; }); 
    if(index === -1){ // Object with the specific type not found. 
     objectValue.push({ 
      type:type, 
      value:[value] 
     }) 
    } else { // Object with the specific type found. So push only the value. 
     objectValue[index].value.push(value) 
    } 
} 
+0

はまた、私は '.find'を使用してお勧めしたいです。この方法では、インデックスを使用してオブジェクトをフェッチする必要はありません。 – Rajesh

+0

@Rajesh私は両方の方法が有効であると言います。 – Christos

+0

また、チェックボックスをオフにした場合は、チェックボックスをオフにしてください。私はこの方法を試しました、var mainValues = []; mainValues.push(value); var sameValueIndex = mainValues.indexOf(value); mainValues.splice(sameValueIndex、1);しかし、正しい結果を与えていない – Sathya

1

問題は、あなたは、すべてのクリックイベントの値を推進していますさ。代わりに、最初に配列を検索し、typeを使用して必要なオブジェクトを見つけてから、このオブジェクトの値配列に値をプッシュします。

var o = objectVale.find(function(x) { 
    return x.type === type; 
}) 

if (o) { 
    o.value = o.value || []; 
    o.value.push(value); 
} else { 
    objectVale.push({ 
    type: type, 
    value: [value] 
    }) 
} 
関連する問題