Wert ändern, wenn das Kontrollkästchen aktiviert ist rectjs

Question

In diesem Code habe ich eine Liste von Kontrollkästchen und neben jedem Kontrollkästchen eine Nachricht, die ausgewählt/nicht ausgewählt Ich brauche jetzt, dass bei der Auswahl jedes Kontrollkästchen ändern Sie diese Nachricht abhängig vom Status der checbox

Checkbox is selected = 'selected ' 
Checkbox is not selected = 'unselected ' 

und die codepen http://codepen.io/fernandooj/pen/ggXGvj dank

Answer 1

ich Ihren Code ein wenig Refactoring und gegabelt Sie Stift hier: http://codepen.io/mrlew/pen/wgPjre

I cre ated ein myItems Array in Staaten, die auf Basis Ihrer allElements und selectedElements Requisiten aufgebaut ist.

In Ihrem Konstruktor:

const myItems = props.allElements.map((item) => { 
    return { 
    value: item, 
    checked: (props.selectedElements.indexOf(item) > -1) 
    } 
}) 

Jedes Element o dieser Array Spur der checked Eigenschaft hält, als value.

Auch können Sie die updateStateList in der Callback-Aufruf .bind mit einem Parameter (docs hier) anhängt. Auf diese Weise setzen Sie den this Kontext und setzen einen zusätzlichen Parameter. Sehr nützlich in diesem Fall.

onClick={this.updateStateList.bind(this, item)} 

Die updateStateList Methode zuerst ein neues Array mit den neuen Werten (mit map) und setState mit diesem neuen Array erstellen:

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}) 
    } 

nahm ich mir die Freiheit andere Sachen zu entfernen.

Hoffe es hilft!

Hinweis: Requisiten als Ausgangszustand vorbei ist nur ein empfehlenswertes Muster angesehen, wenn Ihre Mutterkomponente nicht über das Ergebnis schert, weil Sie Ihre Daten (zwei Quellen von thruth) desynchronisiert werden. Der "richtige" Ansatz wäre, dass ein Elternteil die Transformation durchführen würde, und Ihre Check-out-Checkbox würde nur Benutzer-Klick-Ereignisse verwerfen und das bereits berechnete Array-Objekt erhalten.