在Redux中使用複選框

我在兩個區域中的代碼中出現了一個複選框，第一個在我的reducer中，我想查看該複選框的當前狀態是"true"還是"false"，但我一直在獲取語法如果錯誤。在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' 
/>

來源

2017-10-10 Throkar

你不能這樣做，如果一個這樣的對象內。您可以像使用spread操作符一樣添加獨奏變量，其中的鍵值與要使用的變量相匹配，或者可以直接添加鍵值。嘗試是這樣的：

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

他們都去開啓和關閉，因爲你使用的狀態相同的位來管理它是否被選中。如果你想這樣做，你可以嘗試存儲每一個是否在一個對象中被檢查並且不斷更新。

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

那麼checked道具爲您的CheckBox組件看起來就像..

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

假設你耍的對象出mapStateToProps並把它稱爲isChecked

來源

2017-10-10 22:04:46

在Redux中使用複選框

回答

相關問題