taro-react小程序单选框/多选框

import { useEffect, useState } from 'react';
import { Checkbox, ScrollView } from '@tarojs/components';
export default function Balance() {
  const [loading, setLoading] = useState(false);
  const [allcheck, setAllcheck] = useState(false); // 全选按钮
  const [isClickAllCheck, setIsClickAllCheck] = useState(false); // 点击全选/单选 按钮
  const [checkLists, setCheckLists] = useState<number[]>([]); // 存储的数据列表
  const [balanceList, setBalanceList] = useState([
    { value: 1, text: '1', check: false },
    { value: 2, text: '2', check: false },
    { value: 3, text: '3', check: false },
    { value: 4, text: '4', check: false },
    { value: 5, text: '5', check: false },
    { value: 6, text: '6', check: false },
  ])

  const check = (item) => {
    const updatedItem = { ...item, check: !item.check };
    setBalanceList(prevArr =>
      prevArr.map(prevItem =>
        prevItem === item ? updatedItem : prevItem
      )
    );

    if (updatedItem.check) {
      setCheckLists(prev => [...prev, updatedItem.value]);
    } else {
      setCheckLists(prev => prev.filter(value => value !== updatedItem.value));
    }
  };

  useEffect(() => {
    const handleAllcheckChange = () => {
      if (allcheck && isClickAllCheck) {
        setBalanceList(prevArr => {
          const newCheckLists = prevArr.map(item => item.value);
          setCheckLists(newCheckLists);
          return prevArr.map(item => ({ ...item, check: true }));
        });
      } else if (!allcheck && isClickAllCheck) {
        setBalanceList(prevArr => prevArr.map(item => ({ ...item, check: false })));
        setCheckLists([]);
      }
    };

    handleAllcheckChange();
  }, [allcheck, isClickAllCheck]);


  useEffect(() => {
    const allChecked = balanceList.every(item => item.check);
    setAllcheck(allChecked);
  }, [balanceList]);


  const handleScrollToLower = () => {
    // setLoading(true);
    // // 模拟请求新数据
    // setTimeout(() => {
    //   const newData = Array.from({ length: 10 }, () => ({
    //     value: Math.floor(Math.random() * 10),
    //     text: '文本',
    //     check: false
    //   }))

    //   setBalanceList(prevArr => [...prevArr, ...newData]);
    //   setLoading(false);
    // }, 1000);
  };

  return (
    <view>
      <view className='h-[60vh] pt-[300px]  bg-orange-200 overflow-y-auto'>
        <ScrollView scrollY style={{ height: '60vh' }} onScrollToLower={handleScrollToLower} >
          <view onClick={() => { console.log('checkLists', checkLists) }}>打印选中的数据</view>
          <Checkbox id='remember' value='记住密码' checked={allcheck} onClick={() => setAllcheck(prevState => { setIsClickAllCheck(true); return !prevState; })}>全选</Checkbox>
          {
            balanceList?.map(item => {
              return (
                <view> <Checkbox id={String(item.value)} value={String(item.value)} checked={item.check} onClick={() => { check(item); setIsClickAllCheck(false); }}  >
                  {item.value}
                </Checkbox></view>
              )
            })
          }
          {loading && <view>加载中...</view>}
        </ScrollView>
      </view>
    </view>
  );
}