React框架表单全选和批量删除

import React from 'react';
import "./assets/css/app.css"
import index from "postcss-normalize/index.esm.mjs.map";


class App extends React.Component {
    constructor() {
        super();
        this.state={
            users:[
                {name:"张三",checked:false},
                {name:"李四",checked:false},
                {name:"王五",checked:false},
                {name:"赵六",checked:false}
            ],
            allChecked:false
        };
    }
    //单选
    selectUser(index){
        let tmpUsers=this.state.users,isChecked=true;
        tmpUsers[index].checked=!tmpUsers[index].checked;
        for(let i=0;i<tmpUsers.length;i++){
            if(!tmpUsers[i].checked){
                isChecked=false;
                break;
            }
        }
        this.setState({users:tmpUsers,allChecked:isChecked});
    }
    //全选
    selectAllUsers(){
        this.setState({allChecked:!this.state.allChecked},()=>{
            let tmpUsers=this.state.users;
            for(let i=0;i<tmpUsers.length;i++){
                tmpUsers[i].checked=this.state.allChecked;
            }
            this.setState({users:tmpUsers});
        });
    }
    //单次删除用户
    delUser(index){
        let tmpUsers=this.state.users;
        tmpUsers.splice(index,1);
        this.setState({users:tmpUsers},()=>{
            if(this.state.users.length<=0){
                this.setState({allChecked:false});
            }
        });
    }
    //批量删除用户
    delAllUsers(){
        let tmpUsers=this.state.users,isChecked=false;
        for(let i=0;i<tmpUsers.length;i++){
            if(tmpUsers[i].checked){
                isChecked=true;
                break;
            }
        }
        if(!isChecked){
            alert("请选择要删除的会员");
        }else{
            for(let i=0;i<tmpUsers.length;i++){
                if(tmpUsers[i].checked){
                    tmpUsers.splice(i--,1);
                }
            }
            this.setState({users:tmpUsers},()=>{
                if(this.state.users.length<=0){
                    this.setState({allChecked:false});
                }
            });
        }

    }
    //render()
    render() {
        return (
            <div className="App">
                <table width="100%" border="1" cellSpacing="0" cellPadding="0">
                    <tbody>
                    <tr style={{color:"#FFFFFF",'fontSize':"14px"}}>
                        <td height="40" align="center" bgcolor="#0099CC">
                            <label><input type="checkbox" checked={this.state.allChecked}
                                    onChange={this.selectAllUsers.bind(this)}/>全选</label></td>
                        <td align="center" bgcolor="#0099CC">姓名</td>
                        <td align="center" bgcolor="#0099CC">管理</td>
                    </tr>
                    {
                        this.state.users.map((item,index)=>{
                            return (
                                <tr key={index}>
                                    <td height="40" align="center">
                                        <input type="checkbox" checked={item.checked}
                                        onChange={this.selectUser.bind(this,index)}/></td>
                                    <td align="center">{item.name}</td>
                                    <td align="center" onClick={this.delUser.bind(this,index)}>删除</td>
                                </tr>
                            )
                        })
                    }
                    <tr>
                        <td height="40" colSpan="3">
                            <button type="button" onClick={this.delAllUsers.bind(this)}>批量删除</button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}

    export default App;