React ant design Checkbox多选框
后台数据
import React, { Component } from 'react';
import { Input,Divider,Form,Button ,Checkbox,message} from 'antd';
import { Netx } from '../../MyApi'
// import { set } from 'mobx';
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
class editSalesman extends Component {
constructor(props) {
super(props);
this.state = {
obj:this.props.editObj,
checkedList:this.props.editObj.access_id,//选中的那些
checkedAll:[],
checkAll: false,
data:[
{
id:1,
desc:"我的订单",
name:"myOrder",
indeterminate:false,
child:[
{id:1,label:"新订单",value:1},
{id:2,label:"待付款",value:2},
{id:3,label:"待收货",value:3},
{id:4,label:"待评价",value:4},
{id:5,label:"全部订单",value:5},
]
},{
id:2,
desc:"权限管理",
name:"jurisdiction",
indeterminate:false,
child:[
{id:6,label:"门市信息",value:6},
{id:7,label:"收货地址",value:7},
{id:8,label:"意见反馈",value:8},
{id:9,label:"操作员管理",value:9},
{id:10,label:"编号管理",value:10},
]
}
]
}
}
componentWillReceiveProps(nextProps){
this.setState({
obj:nextProps.editObj,
checkedList:nextProps.editObj.access_id
})
}
//编辑保存
handleSubmit=(e)=>{
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.info("form对象:"+JSON.stringify(values))
if(values.pwd===undefined){
values.pwd=''
message.error("密码不能为空")
return false;
}
if(values.status===true){
values.status=1
}else{
values.status=0;
}
console.info(this.state.checkedAll)
values.id=1;
this.state.checkedAll
values.access_id=this.state.checkedAll
console.info("发给服务器的对象:"+JSON.stringify(values))
// this.qr_add_staff(values)
}
if(this.props.form.getFieldValue("name")==''){
message.error("登录名不能为空")
return false;
}
if(this.props.form.getFieldValue("nickname")==''){
message.error("操作员不能为空")
return false;
}
if(this.props.form.getFieldValue("pwd")==''){
message.error("密码不能为空")
return false;
}
this.props.close();
})
}
//保存___发送给服务器
async qr_add_staff(obj){
// let qr_add_staff =Netx.qr_add_staff(obj);
// if(qr_add_staff.status==1){//成功的标记
// message.success(qr_add_staff.info.tips);
// //返回的修改的操作员信息
// console.log(`返回的修改的操作员信息${qr_add_staff.data.vo}`)
// }else{//失败的标记
// message.error(qr_add_staff.info.tips);
// }
}
onChange(index,checkedList) {
// console.log("选中的"+checkedList)
// console.log(`对象的索引`+index)
let dataList = this.state.data;
let arr=[];
for(var j=0;j<dataList[index].child.length;j++){
arr.push(dataList[index].child[j].value)
}
let flag= this.containAnotherArr(checkedList,arr)
if(flag){
dataList[index].indeterminate=true
}else{
dataList[index].indeterminate=false
}
this.setState({
checkedList,
checkedAll:checkedList,
// data:dataList
});
}
//检测数组是否包含另一个数组
containAnotherArr(aa,bb){
if(!(aa instanceof Array)||!(bb instanceof Array)||((aa.length < bb.length))){
return false;
}
var aaStr = aa.toString();
for (var i = 0 ;i < bb.length;i++) {
if(aaStr.indexOf(bb[i]) < 0) return false;
}
return true;
}
onCheckAllChange(index,e){
// let flag= this.state.data[index].indeterminate
let flag=e.target.checked//查看全选是否选中的值
let data=this.state.data;//拿到对象
data[index]['indeterminate']=flag;//根据是否选中设置相应的属性
var arr =[];//空数组
if(flag){//如果是真的
let list =this.state.data[index].child//循环遍历属性为数组的子选项
for(var i=0;i<list.length;i++){
let value= list[i].value
arr.push(value);//放到新数组里
}
for(var n=0;n<this.state.checkedAll.length;n++){//循环遍历数组
arr.push(this.state.checkedAll[n])
}
this.setState({checkedAll:arr,checkedList:arr,data:data,})
}else{
let list =this.state.data[index].child
var arr2=[];
arr2=this.state.checkedAll
for(var s=0;s<list.length;s++){
var index = arr2.indexOf(list[s].value);
arr2.splice(index, 1);
}
this.setState({
checkedList:arr2,
checkedAll:arr2,
data:data,
});
}
}
//点击取消
cancel(){
this.props.form.resetFields();
this.props.close();
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div style={{padding: '20px'}}>
<Form onSubmit={this.handleSubmit}>
<FormItem>
</FormItem>
<FormItem
label="登录名"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('name',{initialValue:this.state.obj.name},{
rules: [{ required: true, message: '请输入登录员名!' }],
})(
<Input placeholder="请输入登录员名"/>
)}
</FormItem>
<FormItem
label="操作员:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('nickname',{initialValue:this.state.obj.nickname}, {
rules: [{ required: true, message: '请输入操作员姓名' }],
})(
<Input placeholder="请输入操作员姓名"/>
)}
</FormItem>
<FormItem
label="密码:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('pwd',{initialValue:this.state.obj.pwd},{
rules: [{ required: true, message: '请输入密码!' }],
})(
<Input placeholder="请输入密码"/>
)}
</FormItem>
<Divider dashed={true} orientation="left" style={{ width: '100%' }}>权限分配</Divider>
{
this.state.data.map((info,index)=>
<div key={index}>
<Checkbox
onChange={this.onCheckAllChange.bind(this,index)}
checked={info.indeterminate}
>
{info.desc}
</Checkbox>
<CheckboxGroup style={{marginLeft:'20px',marginTop:'20px'}} options={info.child} value={this.state.checkedList} onChange={this.onChange.bind(this,index)} />
<Divider></Divider>
</div>
)
}
<FormItem
style={{marginLeft:'126px'}}
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
>
{getFieldDecorator('status',{ valuePropName: 'checked' })(
<Checkbox >
启用
</Checkbox>
)}
<Button type="primary" htmlType="submit">
保存
</Button>
<Button type="primary" style={{marginLeft:'8px'}} onClick={this.cancel.bind(this)}>
取消
</Button>
</FormItem>
</Form>
</div>
)
}
}
export default editSalesman = Form.create()(editSalesman);
以上是 React ant design Checkbox多选框 的全部内容， 来源链接： utcz.com/z/384360.html
