使用单个按钮单击即可删除多个已检查的项目-反应

Question

我有一个包含多个项目的位置列表。每个项目都有一个复选框。在实施中，如果我检查该列表中的某些项目，然后单击“删除”按钮。然后所有选中的项目将被删除。

无论我使用清单选择了什么，我都已按其id（mruCode）将这些项目存储在另一个列表中。现在在按钮事件中，我尝试清空该新列表。但是，它不起作用。到目前为止，我在这里已经尝试过

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[],
               chkitems:[]
        };
       this.configLocation = this.configLocation.bind(this);
        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.removeConfigLocation = this.removeConfigLocation.bind(this);
        this.removeLocationAll = this.removeLocationAll.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);
    }


    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null && this.props.locationData!= undefined){
            this.configLocation(this.props.locationData);
        }
      }
    componentDidUpdate(prevProps,prevState){
        if ((prevProps.jobId != this.props.jobId || prevProps.locationData != this.props.locationData)){ 
            this.configLocation(this.props.locationData);
        }
    }

    //other codes
    configLocation(locationData){
        let configuredList =[];
        if(locationData.locations.locationDetails != null && locationData.locations.locationDetails !=undefined ){
            locationData.locations.locationDetails.map(item=>{
                 let listitem ={...item};
                 configuredList.push(listitem);
            });
        }
        this.setState({configuredList},()=>{
            console.log(this.state.configuredList);
        }); 
    }
    removeConfigLocation(index){
        this.setState({
            configuredList:this.props.locationData.locations.locationDetails.filter((_,i)=>i!==index)
        },()=>{
            console.log(this.state.configuredList);
        });

    }
   //other codes
    removeLocationAll(){
        this.setState({configuredList: []});
    }

    handleCheckedRemove(mruCode){
        let rItems = [];
        let removeItems = this.state.configuredList.filter(obj=>obj.mruCode===mruCode);
        rItems = rItems.concat(removeItems);
            this.setState({
                chkitems: rItems
            },()=>{
                console.log(this.state.chkitems);
            });
    }
    handleActionButton(){
        this.setState({chkitems:[]});
    }

    render(){
        //const{configuredList} = this.state;
        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.state.configuredList.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.state.configuredList.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"><h3>Configured Location</h3><button className="submitSmallBtn2" onClick={()=>this.handleActionButton()}>Delete Checked</button><button className="allLargeBtn" onClick={()=>this.removeLocationAll()}>Remove all location</button></div><hr/>
              <div><table className="table"><thead>{this.state.configuredList.map((locc,index)=><tr key={index}><th><input type="checkbox" onClick={()=>this. handleCheckedRemove(locc.mruCode)} /><label></label></th><th className="text-left"><b>{locc.mruCode} - {_labels[locc.division]} - {locc.country}</b></th><th className="text-right"><img alt="DeleteIcon" onClick={()=>{this.removeConfigLocation(index)}} className="deleteIconStyle" src="img/delete_large_active.png" /></th></tr>)}</thead> </table></div>

                                   </div>
                                  </div>
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations,
        isChecked:state.locationRed.isChecked
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
        removeAllLocation: () =>{dispatch(removeAllLocation())},
        checkboxState:(mruCode)=>{dispatch(checkboxState(mruCode))},
        checkedLocation:()=>{dispatch(checkedLocation())}
    }
}


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

配置列表仅是这样： [{mruCode：“ 7300”，国家/地区：“ AUSTRALIA”，州：“ Queensland”，部门：“ Engineering”，...}，...]。 / p>