2017-10-10 2 views
0

두 영역의 코드에서 체크 상자에 문제가 있습니다. 첫 번째 단계는 내 감속기에서 체크 상자의 현재 상태가 "true" 또는 "false"인지보고 싶지만 구문을 계속 읽는 것입니다. if에 대한 오류.Redux에서 체크 박스 사용

const initialState = { 
    viewCheckbox: false 
} 
export default (state = initialState, action) => { 
    switch (action.type){ 
     case 'VIEW_CHECKBOX': 
      return { 
       ...state 
       if (viewCheckbox == false) { 
        viewCheckbox: true 
       } else { 
        viewCheckbox: false 
       } 
      } 
     default: 
      return: state 
    } 
} 

내 두 번째 문제는 내가 여러 확인란을 만들기 위해 테이블을 사용하고는 mapDispatchToProps 함께 내가 ID에 의해 그들의 각 하나를 구별 할 수 있도록하려면, 나는 이런 식으로 작업을 수행 할 때, 테이블의 모든 체크 박스를 체크합니다.

const mapDispatchToProps = (dispatch) => ({ 
    handleViewCheckbox: id => ev => { 
     dispatch(viewCheckboxSubmit(id, ev.target.checked)) 
    } 
}) 

그리고 나는 이런 식으로 그것을 체크 박스를 만들 때 :

<FormControlLabel 
    control={ 
     <Checkbox 
      checked={checkedView} 
      onChange={handleViewCheckbox(n.id,checkedView)} 
     /> 
    } 
    label='See' 
/> 

답변

1

당신은 같은 개체 내부 경우 할 수 없습니다. 이전처럼 스프레드 연산자를 사용하거나 키가 사용하려는 변수와 일치하는 솔로 변수를 추가하거나 직접 키를 추가 할 수 있습니다. 그들은 모두에 당신이 그것을이 선택되어 있는지 여부를 관리 할 국가의 같은 비트를 사용하고 있기 때문에 떨어져 전환 할거야

case 'VIEW_CHECKBOX': 
    return { 
     ...state, 
     viewCheckbox: !viewCheckbox 
    } 

: 이런 식으로 뭔가를하려고합니다. 이 방법으로이 작업을하고 싶다면 각 개체가 개체에 체크인되었는지 여부를 저장하고 계속 업데이트 할 수 있습니다.

{ 
    checkboxid1: false, 
    checkboxid2: false, 
    checkboxid3: true // checked 
} 

다음 확인란 구성 요소의 checked 소품은 mapStateToProps에서 해당 개체를 꺼내 isChecked

라고 불렀다 가정 .. 같은

checked={this.props.isChecked[n.id]} 

을 보일 것이다