react使用antd的在图片列表或表格中实现点击其他元素Checkbox选中功能

import React from &＃39;react&＃39;;
import ReactDOM from &＃39;react-dom&＃39;;
import &＃39;antd/dist/antd.css&＃39;;
import &＃39;./index.css&＃39;;
import { Table } from &＃39;antd&＃39;;const columns &＃61; [{title: &＃39;Name&＃39;,dataIndex: &＃39;name&＃39;,render: text &＃61;> {text},
}, {title: &＃39;Age&＃39;,dataIndex: &＃39;age&＃39;,
}, {title: &＃39;Address&＃39;,dataIndex: &＃39;address&＃39;,
}];const data &＃61; [{key: &＃39;1&＃39;,name: &＃39;John Brown&＃39;,age: 32,address: &＃39;New York No. 1 Lake Park&＃39;,
}, {key: &＃39;2&＃39;,name: &＃39;Jim Green&＃39;,age: 42,address: &＃39;London No. 1 Lake Park&＃39;,
}, {key: &＃39;3&＃39;,name: &＃39;Joe Black&＃39;,age: 32,address: &＃39;Sidney No. 1 Lake Park&＃39;,
}, {key: &＃39;4&＃39;,name: &＃39;Disabled User&＃39;,age: 99,address: &＃39;Sidney No. 1 Lake Park&＃39;,
}];class App extends React.Component {state &＃61; {selectedRowKeys: [],};selectRow &＃61; (record) &＃61;> {console.log("record---", record);const selectedRowKeys &＃61; [...this.state.selectedRowKeys];if (selectedRowKeys.indexOf(record.key) >&＃61; 0) {selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);} else {selectedRowKeys.push(record.key);}this.setState({ selectedRowKeys });}onSelectedRowKeysChange &＃61; (selectedRowKeys) &＃61;> {this.setState({ selectedRowKeys });}render() {const { selectedRowKeys } &＃61; this.state;const rowSelection &＃61; {selectedRowKeys,onChange: this.onSelectedRowKeysChange,};return (<TablerowSelection&＃61;{rowSelection}columns&＃61;{columns}dataSource&＃61;{data}onRow&＃61;{(record) &＃61;> ({onClick: () &＃61;> {this.selectRow(record);},})}/>
);}
}ReactDOM.render(, document.getElementById(&＃39;container&＃39;));

import React from "react";
import {Modal,Table,Button,Checkbox,Card,Popconfirm } from &＃39;antd&＃39;;
import LoadingMixin from &＃39;../../../libs/loading.common.mixin&＃39;;
import RequestMixin from &＃39;../../../libs/request.mixin&＃39;;
import NotificationMixin from &＃39;../../../libs/notification.mixin&＃39;;
import Helper from &＃39;../../../libs/helper&＃39;;
import &＃39;./index.css&＃39;;const { Meta } &＃61; Card;
const CheckboxGroup &＃61; 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:&＃39;32frame_tj1&＃39;
},noLoading: true}).then(result&＃61;> {// console.log("result-----------------",result);this.setState({data: result.result || []});});},hideModal() {this.props.onCancel && this.props.onCancel();},onChange(checkedList){console.log(&＃39;checked &＃61; &＃39;, checkedList);this.setState({checkedList:checkedList,indeterminate: !!checkedList.length && (checkedList.length <this.state.data.length),checkAll: checkedList.length &＃61;&＃61;&＃61; this.state.data.length,});},onclicks(e){const checkedList &＃61; [...this.state.checkedList]if (checkedList.indexOf(e) >&＃61; 0) {checkedList.splice(checkedList.indexOf(e), 1);} else {checkedList.push(e);}this.setState({ checkedList});},onCheckAllChange(e){// console.log("全选1",e.target.checked);// console.log("全选2",this.state.data);let dataList &＃61;[]for(var i&＃61;0;i<this.state.data.length;i&＃43;&＃43;){dataList[i]&＃61;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 &＃61; this;if (this.state.checkedList&＃61;&＃61;null||this.state.checkedList.length&＃61;&＃61;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&＃61;> {if (result.result) {that.success("操作成功");that.fetch();}});},render() {let isMainObj &＃61; {1 : "是",0 : "否"}let columns &＃61; [{ title: &＃39;用户&＃39;, dataIndex: &＃39;userid&＃39;, key: &＃39;userid&＃39;, width: &＃39;20%&＃39;,render: (text, record) &＃61;> {return (this.state.userObj && this.state.userObj[text])}},{ title: &＃39;主管理&＃39;, dataIndex: &＃39;is_main&＃39;, key: &＃39;is_main&＃39;, width: &＃39;20%&＃39;,render: (text, record) &＃61;> {return (isMainObj[record[&＃39;is_main&＃39;]])}},{ title: &＃39;设备备注&＃39;, dataIndex: &＃39;remark&＃39;, key: &＃39;remark&＃39;, width: &＃39;30%&＃39; },{ title: &＃39;绑定时间&＃39;, dataIndex: &＃39;create_time&＃39;, key: &＃39;create_time&＃39;, width: &＃39;25%&＃39; }];return (this.props.title && this.props.title || &＃39;新增&＃39;} visible&＃61;{true} width&＃61;"700px" onCancel&＃61;{this.hideModal} maskClosable&＃61;{false} footer&＃61;{this.hideModal}>关  闭}>

this.onChange} value&＃61;{this.state.checkedList}>{this.state.data && this.state.data.map((item,index) &＃61;> {return (<CheckboxclassName&＃61;{&＃39;CheckboxStyle&＃39;}value&＃61;{item.imgid}>this.onclicks.bind(null,item.imgid)} >
)})},

onclicks(e){const checkedList &＃61; [...this.state.checkedList]if (checkedList.indexOf(e) >&＃61; 0) {checkedList.splice(checkedList.indexOf(e), 1);} else {checkedList.push(e);}this.setState({ checkedList});},