javascript - 在单击全选按钮后检查/取消选中复选框的减速器功能-redux react

Question

我有一个项目清单。每个项目都有一个复选框来选择/取消选择该特定项目以添加到另一个列表。现在用户可以做这些事情：

               1. By clicking 'select all' link they can select all the 
                  items.
               2. User can deselect some items from selected ones. 
               3. By clicking 'Add checked Items' button, user can add those current selected items to cart.

到目前为止，我已经创建了 action 和 reducer。我试图将所有选中的项目保存到一个列表中，并通过单击“添加选中的项目”按钮添加该列表。但是，我无法取消选中并选择所有功能。

减速机代码

case 'GET_CHECKBOX':
        let newList = state.location.filter(obj=>obj.mruCode===action.payload)
        let addedItems = state.isChecked.concat(newList)
        return{
             ...state,
             isChecked:addedItems
        }
        case 'GET_CHECKED_LOCATION':
          return{
              ...state,
              conLocations:[...state.isChecked]
          }    

动作代码

export const checkboxState = mruCode =>({
  type: GET_CHECKBOX,
  payload : mruCode
});

export const checkedLocation = () =>({
  type: GET_CHECKED_LOCATION
});

组件代码

export class NewLocationPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            chkitems: []
        };
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
        this.clearall = this.clearall.bind(this);
        this.getLocationData = this.getLocationData.bind(this);
        this.handleRemove = this.handleRemove.bind(this);
        this.handleChecklocation = this.handleChecklocation.bind(this);
        this.handleCheckedAdded = this.handleCheckedAdded.bind(this);
        this.handleCheckedRemove = this.handleCheckedRemove.bind(this);
        this.handleActionButton = this.handleActionButton.bind(this);
        this.checkedAllLocation = this.checkedAllLocation.bind(this);
    }


    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null){
            this.props.initLocationData(this.props.locationData);
        }
    }
    /**componentWillReceiveProps(nextProps) {
        if (nextProps.jobId != this.props.jobId || (JSON.stringify(nextProps.locationData) != JSON.stringify(this.props.locationData))) {
            console.log(nextProps.locationData.locations.locationDetails);
            this.props.initLocationData(nextProps.locationData.locations.locationDetails);
        }
    }*/

    componentDidUpdate(prevProps, prevState) {
        if ((prevProps.jobId != this.props.jobId || (JSON.stringify(prevProps.locationData) != JSON.stringify(this.props.locationData)))) {
            this.props.initLocationData(this.props.locationData.locations.locationDetails);
        }
    }


    togglePanel(e) {
        this.setState({ open: !this.state.open });
    }
    handleRemove(mruCode) {
        this.props.removeLocation(mruCode)
    }
    handleClick(mruCode) {
        this.props.addLocation(mruCode)
    }
    allLocations() {
        this.props.addAllLocation()
    }
    clearall() {
        this.props.removeAllLocation()
    }

    handleChecklocation(mruCode) {
        this.props.checkboxState(mruCode);
    }

    handleCheckedAdded() {
        this.props.checkedLocation()
    }

    checkedAllLocation(){
        this.props.selectAllBoxes()
    }

    /** updating locationData by saving changes - calling this function into jobsPanel */
    getLocationData() {
        let saveableLocationlist = [];
        if (this.props.conLocations != null) {
            const { conLocations } = this.props;
            saveableLocationlist = conLocations;
        }
        const locationData = {
            locationDetails: saveableLocationlist
        }
        return locationData;
    }

    render() {
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return (
            <div className="panel panel-default">
                <div className="panel-heading" onClick={(e) => this.togglePanel(e)}>
                    <div className="row">
                        <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                            <span>{this.props.title}</span>
                        </div>
                        <div className="pull-right">
                            <span className="defaultHeaderTextColor">{this.props.conLocations.map((loc, index) => <span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.props.conLocations.length - 1 ? ',\u00A0' : ''}</span>)}
                                <span onClick={(e) => this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                </div>
                {this.state.open ? (
                    <div className="panel-body">
                        <div className="row grid-divider">
                            <div className="col-sm-6">
                                <div className="col-padding"><div className="pos-div"><h4>Locations List</h4><a data-target="toggle" data-target="#myCheckbox" className="jdClickable1" onClick={()=>this.checkedAllLocation()}>Select all</a><button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={() => this.allLocations()}>Add Checked Locations</button></div><hr />
                                    {this.props.location.map((item, index) => (
                                        <div key={index}><div><input type="checkbox" /><label></label><span className="locationNameSpan">{item.mruCode} - {_labels[item.division]} - {item.country}</span>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode) && (<div className="pull-right jd"><button className="call-to-action" onClick={() => this.handleClick(item.mruCode)}>Add Location</button></div>)}<hr /></div></div>))}
                                </div>
                            </div>
                        </div>
                    </div>) : null}
            </div>

        );
    }
}

function mapStateToProps(state) {
    return {
        location: state.locationRed.location,
        conLocations: state.locationRed.conLocations,
        isChecked: state.locationRed.isChecked
    };
}

function mapDispatchToProps(dispatch) {
    return  bindActionCreators({
        loadData,
        addLocation,
        addAllLocation,
        removeLocation,
        removeAllLocation,
        checkboxState,
        checkedLocation,
        initLocationData,
        selectAllBoxes
    },  dispatch);
}



export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(NewLocationPanel);

如何编写选择所有功能并使用标志取消选择。mruCode是该列表中每个项目的主 ID。

标签： javascriptreactjsredux

Answer 1

你可以试试这个。

case 'UNCHECK_ITEM':
{
  const newList = state.isChecked.filter(obj=>obj.mruCode !== action.payload)
  return{
    ...state,
    isChecked: newList
  }
}
case 'CHECK_ALL_ITEMS':
{
  return{
    ...state,
    isChecked: state.location
  }
}

export const uncheckItem = mruCode =>({
  type: UNCHECK_ITEM,
  payload : mruCode
});

export const checkAllItems = () =>({
  type: CHECK_ALL_ITEMS
});