1、需求描述
image.png
- 由于需求要求实现一个三种状态的复选功能，分别为未选中(value=0)、且选中(value=1)、或选中(value=2)，交互原理和checkbox选框类似
- 切换健康服务类型时缺失信息内容选项会被替换且置未选中状态
- /userlist?healthType=1&subType=1&checkArry=[0,1,2,0,0,0,0],从其它页面跳入初始化查询条件
- 需要准备三种状态的icon图
2、父组件 UserList.js
import CheckboxMulti from '@/components/CheckboxMulti';
const ownerList = [
{
value: 0,
label: '性别',
},
{
value: 0,
label: '年龄',
},
{
value: 0,
label: '身高',
},
{
value: 0,
label: '体重',
},
{
value: 0,
label: '体质',
},
{
value: 0,
label: '心理测试',
},
{
value: 0,
label: '体检信息',
},
];
const remindList = [
{
value: 0,
label: '体质测试',
},
{
value: 0,
label: '生活习惯',
},
{
value: 0,
label: '心理测试',
},
{
value: 0,
label: '体检',
},
{
value: 0,
label: '体重',
},
{
value: 0,
label: '血压值',
},
];
class UseList extends PureComponent {
state = {
checkboxOwnerList: ownerList,
checkboxRemindList: remindList,
checkboxCheckArry: [0, 0, 0, 0, 0, 0, 0, 0],
healthyServiceType: undefined,
}
componentDidMount() {
const {
location: {
query: {
healthType,
subType,
checkArry,
},
},
} = this.props;
const {
checkboxOwnerList,
checkboxRemindList,
} = this.state;
if (healthType && healthType === '1') {
const tempList = deepClone(checkboxOwnerList);
if (subType === '1') {
tempList.forEach((item, index) => {
if (index < 4) {
item.value = 2;
}
});
} else if (subType > 1 && subType < 6) {
tempList[Number(subType) + 2].value = 1;
}
this.setState(
{
healthyServiceType: '1',
checkboxOwnerList: tempList,
checkboxCheckArry: JSON.parse(checkArry),
},
() => {
this.initData();
},
);
} else if (healthType && healthType === '2') {
const tempList = deepClone(checkboxRemindList);
tempList[subType - 1].value = 1;
this.setState(
{
healthyServiceType: '2',
checkboxRemindList: tempList,
checkboxCheckArry: JSON.parse(checkArry),
},
() => {
// 表格列表查询
this.initData();
},
);
} else {
this.initData();
}
}
changeOwnerCheck = list => {
// deepClone是深拷贝方法，防止数据改变render不执行
const tempList = deepClone(list);
this.setState(
{
checkboxOwnerList: tempList,
},
() => {
this.state.checkboxCheckArry = [];
this.state.checkboxOwnerList.forEach(item => {
this.state.checkboxCheckArry.push(item.value);
});
},
);
};
changeRemindCheck = list => {
const tempList = deepClone(list);
this.setState(
{
checkboxRemindList: tempList,
},
() => {
this.state.checkboxCheckArry = [];
this.state.checkboxRemindList.forEach(item => {
this.state.checkboxCheckArry.push(item.value);
});
},
);
};
render() {
const {
checkboxOwnerList,
checkboxRemindList,
healthyServiceType,
} = this.state;
return (
{getFieldDecorator('healthyServiceType', {
initialValue: healthyServiceType,
})(
,
)}
)
}
}
3、子组件CheckboxMulti.js
import React, { PureComponent } from 'react';
import select0 from '@/assets/select_0.png';
import select1 from '@/assets/select_1.png';
import select2 from '@/assets/select_2.png';
import styles from './index.less';
import { deepClone } from '@/utils/utils';
class CheckboxMulti extends PureComponent {
changeStatus = index => {
const { checkboxList, changeCheck } = this.props;
const tempList = deepClone(checkboxList);
let tempIndex = 0;
// 0 - 未选中， 1 - 且选中， 2 - 或选中
if (checkboxList[index].value === 0) {
tempIndex = 1;
} else if (checkboxList[index].value === 1) {
tempIndex = 2;
} else if (checkboxList[index].value === 2) {
tempIndex = 0;
}
tempList[index].value = tempIndex;
changeCheck(tempList);
};
imgFilter = value => {
let src = select2;
if (value === 0) {
src = select0;
} else if (value === 1) {
src = select1;
}
return src;
};
render() {
const { checkboxList } = this.props;
return (
{checkboxList.map((item, index) => (
})
this.changeStatus(index)} alt="" />
{item.label}
))}
);
}
}
export default CheckboxMulti;
- index.less
.list {
display: flex;
align-items: center;
.item {
margin-right: 8px;
color: rgba(0, 0, 0, 0.65);
line-height: 40px;
img {
width: 16px;
height: 16px;
}
i {
margin: 0 8px 0 5px;
font-style: normal;
}
}
}