このコードでは、チェックボックスのリストがあり、各チェックボックスの隣に選択/未選択のメッセージが表示されます。 checboxチェックボックスがチェックされている場合、値を変更する
Checkbox is selected = 'selected '
Checkbox is not selected = 'unselected '
とcodepen http://codepen.io/fernandooj/pen/ggXGvj おかげ
私はあなたのコードビットをリファクタリングし、ここであなたのペンをフォーク： http://codepen.io/mrlew/pen/wgPjre
私はCREあなたのallElementsとselectedElements小道具に基づいて構成された状態にmyItems配列をatedしました。あなたのコンストラクタで
：
const myItems = props.allElements.map((item) => {
return {
value: item,
checked: (props.selectedElements.indexOf(item) > -1)
}
})
各項目は、この配列はvalueとして、checked財産を追跡し、OS。
また、.bindを追加してコールバック内のupdateStateListをパラメータ（docsここ）に呼び出すことができます。このようにして、thisコンテキストを設定し、余分なパラメータを設定しています。この場合非常に便利です。
onClick={this.updateStateList.bind(this, item)}
最初にこの新しいアレイと（map有する）新しい値を使用して新しい配列を作成し、SETSTATE updateStateList方法：
updateStateList(selectedItem, e){
let myNewItems = this.state.myItems.map((item) => {
if (item.value == selectedItem.value) item.checked = !selectedItem.checked
return item
})
this.setState({myItems: myNewItems})
}
Iは、他のものを除去するための自由を取りました。
希望すると助かります！
注：あなたがあなたのデータ（thruthの2つのソースを）非同期化されますので、あなたの親コンポーネントが、結果について気にしない場合は、初期状態として、小道具を渡すにのみお勧めパターンと考えられています。 「正しい」アプローチは、親がその変換を行うようにすることであり、チェックボックスのセットはユーザクリックイベントをパスし、既に計算された配列オブジェクトを受け取るだけです。