체크 박스가 체크 된 경우 값 변경 reactjs

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

내가 CRE myItems 개의 배열을 상태로 변환합니다. 이는 allElements 및 selectedElements 소품을 기반으로 제작되었습니다. 당신의 생성자에서

:

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

이 배열은 value 같이 checked 재산을 추적 각 항목의 운영 체제.

또한 을 추가하여 updateStateList을 콜백에 호출 할 수 있습니다 (여기에서 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}) 
    } 

는 I는 다른 재료를 제거하는 자유했다.

희망이 있습니다.

참고 : 데이터 (thruth 두 가지 소스) desynchronize 때문에 부모 구성 요소 는, 결과에 대한 상관하지 않는 경우 초기 상태로 소품을 통과 만 권장 패턴 간주됩니다. "올바른"접근법은 일부 부모가 변형을 수행하도록하는 것이며 사용자의 체크 세트는 사용자 클릭 이벤트를 전달하고 이미 계산 된 배열 객체를 수신합니다.