模拟数据
const shiftLIst = [ {
name: '我是第1位',
type: '1'
},
{
name: '我是第2位',
type: '2'
},
{
name: '我是第3位',
type: '3'
},
{
name: '我是第4位',
type: '4'
},
{
name: '我是第5位',
type: '5'
},
{
name: '我是第6位',
type: '6'
},
{
name: '我是第7位',
type: '7'
},
{
name: '我是第8位',
type: '8'
}]
存储选中数据
const [current, setCurrent] = useState<any>([])
页面渲染
<div className="App">
{
shiftLIst.map((item: any, index: any) => {
return (
<p onClick={e => itemClick(item.type, e)}>
<Checkbox data-index={index} checked={current.includes(item.type)} value={item.name}>
{item.name}
</Checkbox>
</p>
)
})}
</div>
点击事件
function itemClick(type: any, event: any) {
const idx = shiftLIst.findIndex(item => item.type === type)
if (event.shiftKey) {
let max = Math.max(preIdx, idx)
let min = Math.min(preIdx, idx)
const list = shiftLIst.map((item, index) => (index >= min && index <= max ? item.type : false)).filter(item => item)
setCurrent(list)
} else {
setPreIdx(idx)
setCurrent([shiftLIst[idx].type])
}
}