【React+antd】做一个自定义列的组件
前言：因为我是半途接手，之前的前端已经做了一部分，所以有些东西是二次修改，代码冗余之类的请勿在意（功能实现就好），只是一个小总结，有空优化~
效果：
基本功能：左侧定位栏（大类），中间checkbox.group用来选择，右侧展示已选择的数据&&排序&删除功能，上面搜索列
首先我们需要的数据先定义一下：
state: ProState = {
active: null, // 用来设置初始化首位
indicatorsListRef: {}, // 用于定位
checkIndicatorsList: [], //用来存储传入格式的数组
defaultIndicatorsList: [], // 用来存储右边选中数组
checkArr: this.props.checkArr || [], // 传入的全部数据，大类里包着对应数据的格式
navList: this.props.navList || [], // 标题数组
itemOrder: this.props.itemOrder || [] // 传入-右边选中数组
};
传入的数据格式是这样的：
所以我们为了方便右边已选列表展示，定义一个方法来获取勾选结果：
/**
* @description 获取勾选结果
* @param {array} data 勾选的数据
*/
getDefaultList = (data: any) => {
const resultArr: any[] = [];
data && data.forEach((check: any) => {
if (check.defaultCheckedList) {
resultArr.push(check.defaultCheckedList);
}
});
const list: any[] = resultArr && resultArr.length > 0&& resultArr.reduce((pre: any, next: any) => {
return pre.concat(next);
});
return list;
};
格式是这样的：
jsx是这样滴：
renderContent = () => {
const {
active,
checkIndicatorsList,
indicatorsListRef,
defaultIndicatorsList,
navList,
} = this.state;
return (
<>
<div style={{ display: 'flex' }}>
<div className={styles['m-add-indicators']}>
<TheListTitle title="可添加的指标">
<Search
placeholder="请输入列名称搜索"
// onChange={this.searchColumnChange}
onSearch={this.searchColumn}
style={{ width: 300 }}
/>
</TheListTitle>
<div style={{ display: 'flex' }}>
<div className={styles['m-add-indicators-nav']}>
{navList.map((item: any) => {
return (
<div className={styles['m-add-indicators-nav-item']} key={item.id}>
<div className={styles['m-add-indicators-nav-title']}> {item.value}</div>
{item.subList &&
item.subList.map((el: any) => {
return (
<div
className={`${styles['m-add-indicators-nav-subtitle']} ${
active && active.id === el.id
? styles['m-add-indicators-nav-subtitle-active']
: ''
}`}
key={el.id}
onClick={() => this.handleAnchor(el)}
>
{el.label}
</div>
);
})}
</div>
);
})}
</div>
<div
className={styles['m-select-content']}
ref={(el: any) => {
this.checkboxRef = el;
}}
style={{position:'relative'}}
>
{checkIndicatorsList.map((item: any) => {
return (
<div
ref={(el: any) => {
indicatorsListRef[item.id] = el;
}}
key={item.id}
>
<div className={`${styles['m-select-item']}${item.list.filter((item:any)=>item.hidden === false).length > 0 ? ` m-select-item-show` : ` m-select-item-hidden`}`}>
<BasisCheckbox
allName={item.label}
plainOptions={item.list}
defaultCheckedList={item.defaultCheckedList || []}
getGroupCheckedResult={(values) => {
this.getGroupCheckedResult(values, item);
}}
/>
</div>
</div>
);
})}
</div>
</div>
</div>
<DragResultList list={defaultIndicatorsList} deleteItem={this.deleteItem} />
</div>
</>
);
};
定义一个初始化列表的方法，以及处理数据更新时触发数据重新渲染：
/**
* @description 页面初始化加载
*/
componentDidMount() {
this.initList();
}
/**
* @description 页面props更新
*/
componentWillReceiveProps(nextProps:any) {
// 如果不是第一次数据改变，不触发重初始化
const { checkArr } =this.state;
if(JSON.stringify(nextProps.checkArr) === JSON.stringify(checkArr)) return;
this.setState({
checkArr: nextProps.checkArr,
navList: nextProps.navList,
itemOrder: nextProps.itemOrder
},() => {
this.initList();
});
}
initList = () =>{
const {navList , checkArr, itemOrder } = this.state;
if (navList && navList.length > 0 && navList[0].subList) {
// 设置初始化首位
this.setState({
active: navList[0].subList[0],
});
}
// 默认选中项列表
checkArr && checkArr.length > 0 && checkArr.forEach((item: any) => {
item.defaultCheckedList = item.list && item.list.filter((el: any) => el.state === 1);
item.list && item.list.forEach((el: any) => { el.hidden = false });
});
let initItemOrder:any = [];
if(itemOrder && itemOrder.length && itemOrder.length > 0){
initItemOrder = itemOrder && itemOrder.map((el: any) => {
return {...el,hidden: false}
})
}else {
initItemOrder = this.getDefaultList(checkArr) && this.getDefaultList(checkArr).map((el: any) => {
return {...el,hidden: false}
})
}
this.setState({
checkIndicatorsList: checkArr,
defaultIndicatorsList: initItemOrder || []
});
}
关于中间那块的数据改变，页面会返回对应的values（之前的大佬写的），这个values包括了两个数组，defaultList和checkedList，但是它defaultList就是当前这个group的对象数组，checkedList就是id的数组，如果这个group没有选中东西，它就是空的，对外层的使用略不友好，尽管如此因为实在没时间去重构了所以我直接用了QAQ，外层定义一个checkbox.group改变时的callback的方法：
/**
* @description checkbox 结果
* @param {any} values
* @param {any} item 项
*/
getGroupCheckedResult = (values: any, item: any) => {
const { checkIndicatorsList, defaultIndicatorsList } = this.state;
checkIndicatorsList.forEach((el: any) => {
if (el.id === item.id) {
el.defaultCheckedList = values.defaultList;
}
});
// 新的数组>旧的数组 => add
if(this.getDefaultList(checkIndicatorsList).length > defaultIndicatorsList.length){
const resIDs = defaultIndicatorsList.map(item => item.id)
// 新增的
const diff = this.getDefaultList(checkIndicatorsList).filter(item => !resIDs.includes(item.id))
this.setState({
defaultIndicatorsList: defaultIndicatorsList.concat([...diff]),
});
}else{
const resIDs = this.getDefaultList(checkIndicatorsList).map(item => item.id)
// 删掉的
const diff = defaultIndicatorsList.filter(item => !resIDs.includes(item.id))
const diffIDs = diff.map(item => item.id)
const newArr = defaultIndicatorsList.filter(item => !diffIDs.includes(item.id))
this.setState({
defaultIndicatorsList: newArr,
});
}
};
也就是其实实际右侧的展示其实是直接通过返回的values.defaultList跟源数据进行了处理，然后通过getDefaultList获取到了目前整个中间选中的项。
因为每次操作都只是增加或者删除单独的一项，我们就得到了onChange之后的值并且进行了处理和展示，所以我的逻辑很简单：
如果是增加，那么新旧数组之差集就是新增的，通过filter筛选出来新数组返回来的这条新增的数据（因为是条对象），concat接到旧数组后面，这样就可以按照添加的顺序依次展示在右侧了~
如果是删除，那么新旧数组之差集就是删除的，把这一项的id获取到，filter出旧数组id不等于这个id的其他项保存，就正常删除了~如果是普通数组就更方便了，splice(id,1)舒服的要死 TAT
实现了中间对已选栏的增删后，就是已选栏自己的删除和排序了，在大佬封装的DragResultList这个组件里，删除返回的是当前item对象，清空返回的是-1，所以外层删除的方法就是这样：
/**
* @description 删除项
* @param {object | number } item 项 -1全部
*/
deleteItem = (item: any) => {
const { checkIndicatorsList, defaultIndicatorsList } = this.state;
// -1 === 清空
if (item !== -1) {
checkIndicatorsList.forEach((check: any) => {
if (check.defaultCheckedList) {
check.defaultCheckedList = check.defaultCheckedList.filter((el: any) => el.id !== item.id);
}
});
this.setState({
defaultIndicatorsList: defaultIndicatorsList && defaultIndicatorsList.filter((element:any)=> element.id !== item.id ),
});
} else {
checkIndicatorsList.forEach((check: any) => {
check.defaultCheckedList = [];
});
this.setState({
defaultIndicatorsList: [],
});
}
};
哦还有搜索列功能~：
/**
* 搜索列名称
* @param {string} value - 搜索的值
*/
searchColumn = (value: string) => {
this.setState({
searchColumnValue: value
})
const { checkIndicatorsList } = this.state;
const newCheckArr = JSON.parse(JSON.stringify(checkIndicatorsList))
// 默认选中项列表
newCheckArr && newCheckArr.length > 0 && newCheckArr.forEach((item: any) => {
item.defaultCheckedList = item.list && item.list.filter((el: any) => el.state === 1);
item.list && item.list.forEach((el: any) => {
if(el.value.indexOf(value) !== -1){
el.hidden = false
}else{
el.hidden = true
}
});
});
this.setState({
checkIndicatorsList: newCheckArr,
});
};
这里就是我们为什么初始化的时候全部统一给数据加上hidden为false的原因了，因为这个hidden属性是用来控制是否展示的！（夸一下机智的我）
看看效果：
然后就是提交数据了，这个没有什么好说的，给父组件一个是全部数据，一个是排序数据，父组件那边可以随便选用：
/**
* @description 确定
*/
onSubmit = async () => {
const { channelId } = this.props;
if (!channelId) return;
const { checkIndicatorsList, defaultIndicatorsList } = this.state;
// 处理当前选中的指标项数据，提交
const newList = checkIndicatorsList.map((item:any) => {
let newObj = { id: item.id, label: item.label, list: [] as any };
item.list && item.list.forEach((listItem:any) => {
const newItem = {
id: listItem.id,
value: listItem.value,
state: 0,
isOrder: listItem.isOrder,
};
defaultIndicatorsList && defaultIndicatorsList.forEach((obj:any) => {
if (newItem.id == obj.id) {
newItem.state = 1;
}
})
newObj.list.push(newItem)
})
return newObj
});
if(this.props.onSubmitCallback) this.props.onSubmitCallback(newList, defaultIndicatorsList)
};
至于右侧的拖拽列表（DragResultList）组件不是我写的，也附上代码一起学习叭：
// 第三方库
import React, { useEffect, useState } from 'react';
import { Space } from 'antd';
import {
UnorderedListOutlined,
LockOutlined,
DeleteOutlined,
VerticalAlignTopOutlined,
} from '@ant-design/icons';
// 组件
import { BasisEmpty } from '@/components/index';
import { TheCardDragList, TheListTitle } from '@/modules';
// 类型声明
import { Props } from './index.type';
// 样式
import styles from './style.less';
// 交换数组索引位置位置
function swapPositions(arr: any[], preIndex: number, nextIndex: number) {
arr[preIndex] = arr.splice(nextIndex, 1, arr[preIndex])[0];
return arr;
}
// 拖拽列表
const DragResultList: React.FC<Props> = (props) => {
const { list, deleteItem } = props;
// 结果列表
const [resultList, setResultList] = useState<any[]>([]);
// 置顶Id
const [unTopId, setUnTopId] = useState<number>(-1);
/**
* 设置为置顶
* @param {array} data -数据
*/
const setTopId = (data: any[]) => {
if(data.length !== 0){
// 非固定数组
const unfixArr: any[] = data.filter((el: any) => !el.disabled);
if (unfixArr && unfixArr.length > 0) {
setUnTopId(unfixArr[0].id);
}
}else{
setUnTopId(-1);
}
};
useEffect(() => {
// if (list && list.length > 0) {
setResultList(list);
setTopId(list);
// }
}, [list]);
/**
* 删除
* @param {object} data -删除的项
*/
const handleDelete = (data: any) => {
deleteItem && deleteItem(data);
};
/**
* 向上置顶
* @param {object} data -置顶的项
*/
const handlePlaceTop = (data: any) => {
// 需要置顶的项
const preIndex: number = resultList.findIndex((el: any) => el.id === data.id);
// 当前置顶
const nowIndex: number = resultList.findIndex((el: any) => el.id === unTopId);
if (nowIndex !== -1) {
const arr: any = swapPositions(resultList, preIndex, nowIndex);
setResultList(arr);
const unfixArr: any[] = arr.filter((el: any) => !el.disabled);
setUnTopId(unfixArr[0].id);
}
};
/**
* 获取拖拽结果
* @param {array} data -拖拽数据
*/
const getDrageList = (data: any[]) => {
setResultList(data);
setTopId(data);
};
/**
* 构建卡片
* @param {object} item -卡片项
*/
const renderCardItem = (item: any) => {
return (
<div className={styles['m-card-item']}>
{!item.disabled ? <UnorderedListOutlined style={{ cursor: 'move' }} /> : <LockOutlined />}
<div className={`${styles['m-card-item-title']} ${!item.disabled ? 'cursor_move' : ''}`}>
{item.value}
</div>
{!item.disabled && (
<Space>
{unTopId !== item.id && (
<VerticalAlignTopOutlined
style={{ cursor: 'pointer' }}
onClick={() => handlePlaceTop(item)}
/>
)}
<DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => handleDelete(item)} />
</Space>
)}
</div>
);
};
// 构建已选结果
const renderList = () => {
return resultList && resultList.length > 0 ? (
<TheCardDragList
className={styles['m-drag-list']}
list={resultList}
renderCardItem={renderCardItem}
getDrageList={getDrageList}
/>
) : (
<BasisEmpty />
);
};
return (
<div className={styles['m-drag-result']}>
<TheListTitle list={resultList} clearItems={handleDelete} />
{renderList()}
</div>
);
};
export default DragResultList;
而左边的定位功能其实体验不太好，因为没有滚动效果，只是直接定位了中间的位置，但也记录一下大佬的代码共同学习：
/**
* @description 定位
* @param {object} item 项
*/
handleAnchor = (item: any) => {
this.setState({
active: item,
});
const { indicatorsListRef } = this.state;
const keysList: any[] = Object.keys(indicatorsListRef);
if (indicatorsListRef[item.id] && keysList.length > 0) {
this.checkboxRef.scrollTop =
indicatorsListRef[item.id].offsetTop - indicatorsListRef[keysList[0]].offsetTop;
}
};
关于这个我觉得也许可以考虑用antd的锚点组件，但是实在没空了QAQ回头有时间试一下
补充：
经过师傅的提醒，在中间的包裹层加scroll-behavior: smooth;这个样式，即可有滚动效果，滚动中间高亮左边可用 IntersectionObserver。
因为我是点击左边定位，没有滚动包裹层高亮的需求，因此不做赘述。
e.g.
学习文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
阮一峰：http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
顺便大佬的BaseCheckbox的代码也贴一下，基本没改什么：
// 第三方库
import _ from 'lodash';
import { Checkbox, Tooltip } from 'antd';
import React, { useState, useEffect } from 'react';
// 类型声明
import { Props, CheckProps } from './index.type';
// 样式
import styles from './style.less';
const { Group } = Checkbox;
const BaseCheckbox: React.FC<Props> = (props) => {
// 父级数据
const {
plainOptions,
defaultCheckedList,
showAll,
showTip,
limit,
disabled,
allName,
showDefault,
defaultSystem,
getGroupCheckedResult,
} = props;
// 默认的id
const formattedCheckedList = defaultCheckedList && defaultCheckedList.map((item) => item.id);
// disabled 的 id
const disabledCheckedList =
plainOptions && plainOptions.filter((item: any) => item.disabled).map((item) => item.id);
// 初始化数据
const [state, setState] = useState<CheckProps>({
plainOptions: [],
checkedList: [],
indeterminate: false,
checkAll: false,
});
// 全选
const [allValuesChecked, setAllValuesChecked] = useState([]);
//默认
const [checkDefault, setDefaultCheck] = useState<any>(true);
/**
* @description 依赖默认项 与初始化数据
*/
useEffect(() => {
if (plainOptions) {
const formattedValues = plainOptions.map((item) => {
return { label: item.value, value: item.id, ...item };
});
// @ts-ignore
setAllValuesChecked(() => {
return plainOptions.map((item) => {
return item.id;
});
});
setState({
plainOptions: formattedValues,
checkedList: formattedCheckedList,
indeterminate:
!!formattedCheckedList.length && formattedCheckedList.length < plainOptions.length,
checkAll: formattedCheckedList.length === plainOptions.length,
});
}
}, [defaultCheckedList, plainOptions]);
// 监听点击事件 超过个数禁止点击
useEffect(() => {
if (!limit) return;
// 如果超过个数 未选中的 disabled true
if (state.checkedList && state.checkedList.length === limit) {
_.forEach(plainOptions, (o: any) => {
if (_.includes(state.checkedList, o.id)) {
o.disabled = false;
} else {
o.disabled = true;
}
});
} else {
_.forEach(plainOptions, (o: any) => {
o.disabled = false;
});
}
}, [state.checkedList, plainOptions]);
/**
* 改变选择项
* @param {array} checkedList - 已选的项
* @return 已选项为选择的项
*/
const onChange = (checkedList: any[]) => {
// console.log(checkedList,'--checkedList-', plainOptions)
// 传递给父级
const defaultList = plainOptions
.map((item: any) => {
if (checkedList.includes(item.id)) {
return item;
}
return null;
})
.filter((item) => item != null);
const checkInfo = {
...state,
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
};
setState(checkInfo);
if (getGroupCheckedResult) {
getGroupCheckedResult({
defaultList,
checkedList,
});
}
};
/**
* @description 依赖全选 与所选项
*/
useEffect(() => {
if (showDefault) {
setDefaultCheck(_.isEqual(state.checkedList, defaultSystem));
}
}, [state]);
/**
* @description 默认数据
* @return 已选项为默认数据
*/
const onCheckDefaultChange = () => {
if (!defaultSystem) return;
// props.changeDefautUse();
return setState({
...state,
indeterminate: !!defaultSystem.length && defaultSystem.length < plainOptions.length,
checkAll: defaultSystem.length === plainOptions.length,
checkedList: defaultSystem,
});
};
/**
* 全选
* @param {object} event - 原生项
* @return 已选项为全部选项
*/
const onCheckAllChange = (e: any) => {
// 控制全选的选项项
const checkedArr: any[] = e.target.checked
? allValuesChecked
: _.intersection(allValuesChecked, disabledCheckedList);
// 传递给父级
const defaultList = plainOptions
.map((item: any) => {
if (checkedArr.includes(item.id)) {
return item;
}
return null;
})
.filter((item) => item != null);
// 传递给父级
if (getGroupCheckedResult) {
getGroupCheckedResult({
defaultList,
checkedList: checkedArr,
checkAll: true,
});
}
setState({
...state,
checkedList: checkedArr,
indeterminate: false,
checkAll: e.target.checked,
});
};
// 全选与默认
const handleCheckbox = () => {
const unHideList:any[] = plainOptions && plainOptions.filter((item:any)=>item.hidden === false)
const hiddenGroup = unHideList && unHideList.length > 0 ? false : true;
return (
!hiddenGroup &&
<div>
{showAll && (
<Checkbox
indeterminate={state.indeterminate}
onChange={onCheckAllChange}
checked={state.checkAll}
>
{allName || (state.checkAll ? '取消全选' : '全选')}
</Checkbox>
)}
{showDefault && (
<Checkbox onChange={onCheckDefaultChange} checked={checkDefault}>
系统默认
</Checkbox>
)}
</div>
);
};
// checkbox组
const renderGroup = () => {
const unHideList:any[] = plainOptions && plainOptions.filter((item:any)=>item.hidden === false)
const hiddenGroup = unHideList && unHideList.length > 0 ? false : true;
return (
<>
{/* 带有提示Tooltip */}
{showTip ? (
!hiddenGroup &&
<Group disabled={disabled} value={state.checkedList} onChange={onChange}>
{plainOptions.map((o) => (
<Tooltip title={o.nouns} key={o.id} >
<Checkbox disabled={o.disabled} key={o.id} value={o.id} style={{display: o.hidden ? 'none' : 'inline-block'}}>
{o.value}
</Checkbox>
</Tooltip>
))}
</Group>
) : (
!hiddenGroup &&
<Group disabled={disabled} value={state.checkedList} onChange={onChange}>
{plainOptions.map((o) => (
<Checkbox disabled={o.disabled} key={o.id} value={o.id} style={{display: o.hidden ? 'none' : 'inline-block'}}>
{o.value}
{o.lock}
</Checkbox>
))}
</Group>
)}
</>
);
};
return (
<div className={styles['c-base-checkbox']}>
{state.plainOptions.length > 0 && (
<>
{showAll && handleCheckbox()}
{renderGroup()}
</>
)}
</div>
);
};
// 默认
BaseCheckbox.defaultProps = {
showAll: true,
showTip: false,
defaultCheckedList: [],
};
export default BaseCheckbox;
至此一个复杂的要死套来套去的自定义列组件就做好啦，呜呜呜呜
