时间戳

首页 > 解决方案 > 在 react-redux 中选择所有复选框功能

javascript - 在 react-redux 中选择所有复选框功能

问题描述

我是 react-redux 的新手。我正在尝试使用单独的复选框选择来选择所有复选框功能。选中所有单个复选框后，需要选中 SelectAll 复选框。我已经花时间这样做了，但我发现我出错了。

Action.js:-

    const SELECT_CHECKBOX = "SELECT_CHECKBOX";
    const SELECT_ALL_CHECK_BOX = "SELECT_ALL_CHECK_BOX";
    
    export const selectCheckBox = (e,id) =>{
        return{
            type:SELECT_CHECKBOX,
            event:e.target.checked,
            checkBoxID:id
        }
    }
    export const selectAllCheckBox = (e) =>{
        return{
            type: SELECT_ALL_CHECK_BOX,
            event: e.target.checked,
        }
    }

减速器.js：-

    const checkBoxSelects = {
        selectAll: false,
        checkBox : [
            {label:"one",checked:false},
            {label:"two",checked:true},
            {label:"three",checked:false},
            {label:"four",checked:false},
        ]
    }
        export const checkBoxReducer = (state = checkBoxSelects, action) => {
            switch(action.type){
                case SELECT_CHECKBOX: 
                    let checkBox = [...state.checkBox];
                    checkBox[action.checkBoxID].checked = action.event
                    let selectAll = state.checkBox.every(item => item.checked === true) ? true : false
                    let newArray = {
                        ...state,
                        selectAll,
                        checkBox,
                    }
                return newArray;
                default: return state;
            }
        }
        
        export const selectAllReducer = (state = checkBoxSelects, action) =>{
            switch(action.type){
                case SELECT_ALL_CHECK_BOX: 
                state.selectAll = action.event
                state.checkBox.forEach(item => item.checked = action.event)
                return { ...state};
                default: return state;
            }
        }

reducerIndex.js

    import { checkBoxReducer,selectAllReducer } from './reducer';
    import { combineReducers } from 'redux';
    
    const rootReducers = combineReducers({
        checkBoxHandler : checkBoxReducer,
        selectAllState: selectAllReducer,
    })

Containet.js：-

    import React from 'react'
    import {selectCheckBox, selectAllCheckBox } from './action/index'
    import { connect } from 'react-redux';
    
    function CakeContainer(props){
        return(
            <>
                <div>
                    <div>
                        <input 
                            type="checkBox" 
                            checked={props.slectAll}  
                            onChange={(e) => props.selectAllFn(e)}
                        />
                        <label>select ALL</label>
                    </div>
                    {props.checkBoxData.map((item,i) => {
                      return (
                          <div>
                            <input 
                                type="checkbox" 
                                checked={item.checked} 
                                onChange = {(e) => props.onChangeSelect(e,i)}
                            />
                            <label>{item.label}</label>
                          </div>
                      )  
                    })}
                </div>
            </>
    
        )
    }
    
    const mapStateToProps = (state) =>{
     return{
         checkBoxData: state.checkBoxHandler.checkBox,
         slectAll : state.checkBoxHandler.selectAll, 
     }
    }
    
    const mapDispatchToProps = dispatch =>{
        return{
            onChangeSelect: (e,i) => dispatch(selectCheckBox(e,i)),
            selectAllFn: (e) => dispatch(selectAllCheckBox(e)),
        }
    }
    
    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(CakeContainer)
    
    export default rootReducers;

标签： javascriptreactjsreact-redux

解决方案

在Reducer.js我看来，你设置状态的方式是不正确的。两个组件的原始状态现在是

{
   selectAll: false,
   checkBox : [
        {label:"one",checked:false},
        {label:"two",checked:true},
        {label:"three",checked:false},
        {label:"four",checked:false},
   ]
}

这意味着在您使用combineReducers商店的最终形状后，您会看到

{
  checkBoxHandler: {
    selectAll: false,
    checkBox : [
        {label:"one",checked:false},
        {label:"two",checked:true},
        {label:"three",checked:false},
        {label:"four",checked:false},
   ]
  },
  selectAllState: {
    selectAll: false,
    checkBox : [
        {label:"one",checked:false},
        {label:"two",checked:true},
        {label:"three",checked:false},
        {label:"four",checked:false},
   ]
  }
}

我相信这不是你想要的。还请添加更多关于您想要实现的目标的描述。

推荐阅读