效果图

直接上代码

import React, { useState, useEffect, useImperativeHandle } from 'react';
import styles from './index.less';

export default function MultiSelect({ cRef, cardConfig = {
    min: 1, // 最小数
    max: 12, // 最大数
    num: 3, // 最多选中数量
  } }: any) {
  const { min, max, num, odds, PlayOdds, type } = cardConfig;
  useEffect(() => {
    // 生成数字数量
    const nums = Array.from({ length: max }, (v, i) => ({
      name: i + min,
      checked: false,
    }));
    setNumsDate(nums);
  }, []);
  const [numsDate, setNumsDate] = useState<any[]>([]);
  const [selectList, setSelectList] = useState<number[]>([]);

  useImperativeHandle(cRef, () => ({
    getTeams: () => selectList, // 暴露组件内部数据teams给父组件
  }));
  // 选号逻辑
  const changeNum = (
    item: { name: number; checked: boolean },
    index: number,
  ) => {
    setNumsDate(() => {
      const newDate = [...numsDate];
      newDate[index].checked = !newDate[index].checked;
      return newDate;
    });
  };
  const clickHandle = (
    item: {
      name: number;
      checked: boolean;
    },
    index: number,
  ) => {
    // num是选择几个 根据这个去判断最大选择数量
    if (selectList.length === num) {
      if (item.checked) {
        changeNum(item, index);
      }
    }
    if (selectList.length < num) {
      changeNum(item, index);
    }
    if (selectList.length < num && !selectList.includes(item.name)) {
      setSelectList([...selectList, item.name]);
    }
    if (selectList.length > 0 && selectList.includes(item.name)) {
      setSelectList(() => {
        return selectList.filter((record) => record != item.name);
      });
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.numBox}>
        {numsDate?.map((item, index) => {
          return (
            <div
              key={index}
              className={`${styles.numItem} ${
                item.checked ? styles.active : ''
              }`}
              onClick={() => clickHandle(item, index)}
            >
              {item.name}
            </div>
          );
        })}
      </div>
      <div className={styles.exhibition}>
        <span>已选择号码</span>
        {selectList.map((rec, index) => {
          return (
            <div key={index} className={styles.activeRed}>
              {rec}
            </div>
          );
        })}
      </div>
    </div>
  );
}