在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中使用复选框

回答

相关问题