数组遍历实现shift 选中元素，类似文件shift文件选取

模拟数据

 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])
    }
  }