react 使用antd的多选功能做一个单选与全选效果

一个小而简单的单选全选功能，其实官网已经给出效果了，不过是我多做了些复合用法

 

addorupdatemodal.jsx

import React from "react";
import {Modal,Table,Button,Checkbox,Card,Popconfirm } from 'antd';
import LoadingMixin from '../../../libs/loading.common.mixin';
import RequestMixin from '../../../libs/request.mixin';
import NotificationMixin from '../../../libs/notification.mixin';
import Helper from '../../../libs/helper';
import './index.css';

const { Meta } = Card;
const CheckboxGroup = Checkbox.Group;
export default React.createClass({
    mixins: [LoadingMixin, NotificationMixin, RequestMixin],
    propTypes: {
        onManualClose:React.PropTypes.func,
        onOk: React.PropTypes.func,
        onCancel: React.PropTypes.func,
        title: React.PropTypes.string,
        item: React.PropTypes.object
    },
    getInitialState() {
        return {
            item: this.props.item  && this.props.item || {},
            data: [],
            userObj: {},
            deleteList:[],
            indeterminate: false,
            checkAll: false,
            checkedList:[]
        };
    },
    componentWillMount() {
        this.fetch();
    },
    fetch() {
        // console.log("11111111111------------》",this.props.item.frameid);
        this.post({
            url: "Api/historyPush/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
            param: {
                frameid: this.props.item.frameid
                // frameid:'32frame_tj1'
            },
            noLoading: true
        }).then(result=> {
            // console.log("result-----------------",result);
            this.setState({data: result.result || []});
        });
        // this.get({
    
        //     url: "Api/lists/module/user/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
        //     param: {
    
        //     },
        //     noLoading: true
        // }).then(result=> {
    
        //     let userObj = {};
        //     result.result && result.result.map(item => {
    
        //         userObj[item.id] = item.nickname;
        //     });
        //     this.setState({userObj: userObj|| {}});
        // });
    },
    hideModal() {
        this.props.onCancel && this.props.onCancel();
    },
    onChange(checkedList){
        // console.log('checked = ', checkedList);
        this.setState({
            checkedList:checkedList,
            indeterminate: !!checkedList.length && (checkedList.length < this.state.data.length),
            checkAll: checkedList.length === this.state.data.length,
        });

    },
    onCheckAllChange(e){
        // console.log("全选1",e.target.checked);
        // console.log("全选2",this.state.data);
        let dataList =[]
        for(var i=0;i<this.state.data.length;i++){
            dataList[i]=this.state.data[i].imgid
        }
        // console.log("dataList--------",dataList)
        this.setState({
            checkedList: e.target.checked ? dataList : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    },
    handleClose(record) {
        var that = this;
        if (this.state.checkedList==null||this.state.checkedList.length==0) {
            that.error("请选择要删除的图片");
            return false;
        };
        // console.log("删除的图片",this.props.item.frameid,this.state.checkedList);
        this.post({
            url: "Api/clearCache/module/frame/key/dac509bd90a82719a3569291e12c24a6f1af4bac",
            param: {
                frameid:this.props.item.frameid,
                imglist: this.state.checkedList
            },
            noLoading: true
        }).then(result=> {
            if (result.result) {
                that.success("操作成功");
                that.fetch();
            }
        });
    },
    render() {
        let isMainObj = {
            1 : "是",
            0 : "否"
        }
        let columns = [
            { title: '用户', dataIndex: 'userid', key: 'userid', width: '20%',
                render: (text, record) => {
                    return (