类似checkbox，react，ts自定义多选项，并限制多选数量

方法

const [checkedArr, setCheckedArr] = useState([])
const setCheckArr = (i: number, v: string) => {
        let arr = checkedArr
        let index = 0
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] === v) {
                index = i
            }
        }
        if (arr.includes(v)) {
            arr.splice(index, 1)
            //解决异步问题
            setCheckedArr(arr => [...arr])
        } else {
            if (arr.length < 3) {
                arr.push(v)
                setCheckedArr(arr => [...arr])
            } else {
                Toast.show({ content: '最多选三个' })
            }
        }
    }

html

<div className='step-list'>
                {
                    options.map((data: nameProps, index) => {
                        return (
                            <div
                                key={data.id}
                                className={checkedArr.includes(data.id) ? 'list-item selscted' : 'list-item'}
                                onClick={() => setCheckArr(index, data.id)}>
                                <span className='item-name'>{data.name}</span>
                                <span className='check-icon'></span>
                            </div>
                        )
                    })
                }
            </div>