React框架实现批量删除

import React, {Component} from 'react';
import commonConfig from "../../static/js/commonConfig";
import Checkbox from "antd/es/checkbox/Checkbox";
import {message} from "antd";

// import {message} from "antd";

class TestText extends Component {
    state = {
        messageList: [],
    }

    componentDidMount() {
        this.getAllMessageList()
    }

    getAllMessageList = () => {
        commonConfig.ajaxNoFileMethods('/info/getInfoPageList', {}, res => {
            console.log('res', res.list);
           
            for (let i = 0; i < res.list.length; i++) {
               res.list[i]['checked'] = false
            }
           this.setState({messageList: res.list});

        }, null, null, null, false)
    }
    //单选
    selectedUser = (index) => {
        let tmpUsers = this.state.messageList
       //, 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({messageList: tmpUsers})
    }

    delAllUsers() {
        const {messageList} = this.state
        let arr = [];
        messageList.filter(item => {
            if (item.checked === true) {
                arr.push(item.id)
            }
        })
        const id = arr.join(',');
        if (arr.length > 0) {
            commonConfig.ajaxNoFileMethods('/info/deleteInfo', {id}, res => {
                if (res.code === '200') {
                    message.success(res.message);
                    this.getAllMessageList();
                } else {
                    message.warning(res.message)
                }
            }, null, null, null, false)
        } else {
            message.info('请选择删除的信息')
        }
    }

    render() {
        const {messageList} = this.state;
        return (
            <div>

                <ul style={{display: 'flex', flexDirection: 'column', padding: '30px', boxSizing: 'border-box'}}>
                    {messageList.map((item, index) => (
                        <li key={index} style={{display: 'flex', marginBottom: '10px'}}>
                            <Checkbox checked={item.checked} onChange={this.selectedUser.bind(this, index)}/>
                            <p style={{paddingLeft: '10px'}}>{item.title}</p>
                        </li>
                    ))}
                </ul>

                <button type="button" onClick={this.delAllUsers.bind(this)}>批量删除</button>
            </div>
        );
    }
}

export default TestText;