React实现checkbox group多组选项和标签组显示的联动
实现功能：勾选checkbox项，确定后，已勾选的checkbox项以tag标签的形式展示，tag标签可快捷删除。
实现过程：
- 使用React。
- 使用Ant Design的Checkbox、Tag组件。
- 整个组件主要分为两个部分：多选框组和Tag标签组。
1. 多选框组
class AddInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedList: [], // checkbox已选择的选项
indeterminate: [], // 全选框-已有选择非全选
checkAll: {}, // checkbox group 的全部title状态true/false
tempList: [], // 临时存储checkbox已选择的选项
checkTitle: {} // checkbox group中已选择的title（全选）
};
}
/* 确定勾选 */
handleOk = () => {
if (this.state.tempList.length > 0) {
// 将已选择信息传给Tags组件
this.props.getChecked({
checkedItem: this.state.tempList,
checkAll: this.state.checkAll,
indeterminate: this.state.indeterminate,
checkTitle: this.state.checkTitle
});
}
}
/* checkbox单选 */
onChange = (allCheckArr, checkedList) => {
let checkAll = this.state.checkAll;
let indeterminate = [];
let checkTitle = {};
Object.keys(allCheckArr).forEach((title) => {
checkTitle[title] = 0;
for (let checkedItem of checkedList || []) {
if (allCheckArr[title].includes(checkedItem)) {
checkTitle[title]++;
checkAll[title] = checkTitle[title] === allCheckArr[title].length;
indeterminate[title] = !!checkTitle[title] && (checkTitle[title] < allCheckArr[title].length);
}
}
if (checkTitle[title] === 0) { // 选项组下仅有一个选项时取消选中
checkAll[title] = false;
}
});
this.setState({
checkedList,
tempList:checkedList,
indeterminate: indeterminate,
checkAll: checkAll,
checkTitle: checkTitle
});
}
/* checkbox全选 */
onCheckAllChange = (allCheckArr, title, e) => {
this.state.checkAll[title] = e.target.checked;
let checkedListT = [];
checkedListT.push(...this.state.checkedList);
let indeterminate = this.state.indeterminate || [];
let checkTitle = this.state.checkTitle || {};
if (e.target.checked === true) { // 全选
checkedListT.push(...allCheckArr[title]);
checkedListT = Array.from(new Set(checkedListT)); // 去重（原先indeterminate为true的情况）
checkTitle[title] = allCheckArr[title].length;
} else { // 取消全选
let common = checkedListT.filter(v => allCheckArr[title].includes(v));
checkedListT = checkedListT.concat(common).filter(v => checkedListT.includes(v) && !common.includes(v));
checkTitle[title] = 0;
}
indeterminate[title] = false;
this.setState({
tempList: checkedListT,
checkedList: checkedListT,
indeterminate: indeterminate,
checkTitle: checkTitle
});
}
render() {
const { checkedList, checkAll, indeterminate } = this.state;
const { allCheckArr } = this.props;
return (
<div className={styles.modalcontent} >
{
allCheckArr.map( ({ title, value }, key ) => (
<div className={styles.checksgroup}>
<div>
<Checkbox
indeterminate={indeterminate[title]}
onChange={this.onCheckAllChange.bind(this, allCheckArr, title)}
checked={checkAll[title]}
>
{title}
</Checkbox>
</div>
<br />
<CheckboxGroup className={styles.contents} options={value} value={checkedList} onChange={this.onChange.bind(this, allCheckArr)} />
</div>
))}
</div>
);
}
}
export default AddInfo;
- 由于Ant Design官网上checkbox group的示例代码只有一个check group，本组件是可以有多组的情况，因此主要通过checkedList，checkAll，indeterminate，checkTitle几个状态控制checkbox group与单个的checkbox的全勾选、半勾选、无勾选几种情况的联动。
- checkbox单选的操作是传入当前选择的所有的选项，然后与原先的可选项对比，计算出checkAll，indeterminate，checkTitle的值。每次要先将checkAll，indeterminate，checkTitle置空，遍历所有的已选项和待选项。
- checkbox全选的函数本来是可以复用单选的操作，但是全选之后得出checkAll，indeterminate，checkTitle的值的过程比单选更简单一些，不用遍历选项数组，所以重写了全选的逻辑，没有复用单选的函数，虽然代码量多几行，但是执行过程更简单一些。
2. Tag标签组
import React from 'react';
import { Tag } from 'antd';
import styles from './index.less';
class Tags extends React.Component {
constructor(props) {
super(props);
this.state = {
items: this.props.items, // 需要显示的tag数组
checkAll: this.props.checkAll, // 该tag所在的数组元素是否全部作为tag存在
indeterminate: this.props.indeterminate, // 该tag所在的数组元素是否部分作为tag存在
allCheckArr: this.props.allCheckArr, // 该tag所在的数组
checkTitle: this.props.checkTitle // 该tag所在的数组元素作为tag存在的数量
};
}
componentWillReceiveProps = ( value, nextState) => {
this.setState({
items: value.items,
checkAll: value.checkAll,
indeterminate: value.indeterminate,
allCheckArr: value.allCheckArr,
checkTitle: value.checkTitle
});
}
delete = (key, value, e) => {
e.preventDefault();
let items = this.state.items;
let checkAll = this.state.checkAll;
let indeterminate = this.state.indeterminate;
let allCheckArr = this.state.allCheckArr;
let checkTitle = this.state.checkTitle;
items.splice(key, 1);
for (let title in allCheckArr) {
for (let item of allCheckArr[title]) {
if (item === value) {
checkTitle[title]--;
checkAll[title] = false;
if (checkTitle[title] === 0) { // 该选项组下的选项全部删除
indeterminate[title] = false;
} else {
indeterminate[title] = true;
}
}
}
}
this.setState({
items: items,
checkAll: checkAll,
indeterminate: indeterminate,
checkTitle: checkTitle
});
this.props.changeCheckeditems(items);
}
render() {
const items = this.state.items?this.state.items:[];
return (
<div>
{
items.map((value, key) => (
<Tag className={styles.singletag} closable key={key} onClose={this.delete.bind(this, key, value)}>{value}</Tag>
))}
</div>
);
}
}
export default Tags;
在多选框组对选项勾选之后，将选择结果传入Tags标签组件，该组件以Tag标签将已勾选的选项展示出来。Tag标签可以点击右边的“x”快捷删除，删除后，多选框组中相应的选项也会取消勾选。
3. 组件使用
这两个组件放在同一个父组件中使用，实现值传递。
class parent extends React.Component {
/* 获取待选择选项 */
getAllCheckArr = () => {
...
this.setState({
allCheckArr
...
});
...
}
/* 获取checkbox选择的选项 */
getChecked = (val) => {
this.setState({
checkedItem: val.checkedItem,
checkAll: val.checkAll,
indeterminate: val.indeterminate,
checkTitle: val.checkTitle
});
}
/* 获取tags删除后的选项 */
changeChecked = (val) => {
...
this.setState({
changedItem: val
});
...
}
render() {
const { checkedItem, changedItem,, checkAll, indeterminate, checkTitle } = this.state;
return (
...
<AddInfo
checkList={this.state.checkedItem}
allCheckArr={this.state.allCheckArr|| []}
getChecked={this.getChecked.bind(this)}
/>
<Tags
allCheckArr={this.state.allCheckArr|| []}
checkAll={checkAll}
checkTitle={checkTitle}
indeterminate={indeterminate}
items={checkedItem}
changeChecked={this.changeChecked.bind(this)}
/>
...
);
}
}
代码经过了比较大程度的删改，删除了许多无关功能，只保留了组件功能的核心部分，因此直接copy可能会有报错。。。
