значение изменения, если флажок установлен.

Question

В этом коде у меня есть список флажков и рядом с каждым флажком сообщение, в котором указано выбранное/не выбранное. Мне теперь нужно, чтобы при каждом изменении каждого из этих флажков изменилось это сообщение в зависимости от состояния checbox

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

и codepen http://codepen.io/fernandooj/pen/ggXGvj благодаря

Answer 1

Я переработан код немного, и раздвоенный вам перо здесь: http://codepen.io/mrlew/pen/wgPjre

Я созд ated массив myItems в состояния, построенный на основе ваших реквизитов allElements и selectedElements.

В конструкторе:

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

Каждый элемент ОС этот массив отслеживает checked собственности, как value.

Кроме того, вы можете позвонить updateStateList в обратном вызове, добавив .bind с параметром (docs здесь). Таким образом, вы устанавливаете контекст this, а также устанавливаете дополнительный параметр. Очень полезно в этом случае.

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

Метод updateStateList сначала создать новый массив с новыми значениями (с map) и SetState с новым массивом:

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

Я взял на себя смелость удаления других вещей.

Надеюсь, это поможет!

Примечание: прохождение реквизита в качестве начального состояния рассматривается только рекомендуемый шаблон, если ваш родительский компонент не заботится о результате, потому что вы будете десинхронизировать ваши данные (два источника thruth). «Правильный» подход состоял бы в том, чтобы позволить некоторому родителю выполнить преобразование, а ваш набор-флажок только пропускает события щелчка пользователя и получает объект с уже вычисляемым массивом.