在react关于antd中的checkbox后台请求分页之后存储之前选中的值

最新推荐文章于 2023-10-17 10:24:52 发布

山下小飞鱼

最新推荐文章于 2023-10-17 10:24:52 发布

阅读量189

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/bossweiga/article/details/132013679

版权

该文章展示了一个React组件，使用useState和useEffect管理状态，实现动态加载Checkbox选项。根据页面变化，选项从check、check2、check3数组中切换。同时，提供了选择项的变更处理函数和分页功能，以及打印选定值的按钮。

摘要由CSDN通过智能技术生成

import React, { useEffect, useState } from 'react'
import { Button, Pagination, Checkbox } from 'antd'

export default function New3() {
  const [nowpage, setNowPage] = useState(1)
  const check = ['taoi', 'jui', 'lii', 'juzi'];
  const [nowChoice, setnowChoice] = useState(check)
  const check2 = ['t2aoi2', 'j2ui2', '2lii2', '2juzi2'];
  const check3 = ['qwdq', 'j2uqweqi2', 'qwqf', 'qwe2'];

  useEffect(() => {
    getnewCheck()
  }, [nowpage])
  const getnewCheck = () => {
    if (nowpage === 2) {
      setnowChoice(check2)
    } else if(nowpage === 3) {
      setnowChoice(check3)
    }else{
      setnowChoice(check)
    }
  }
  const [selectedItems, setSelectedItems] = useState([]);

  const handleCheckboxChange = (value) => {
    console.log('2313', value)
    const newSelectedItems = [...selectedItems];
    const index = newSelectedItems.indexOf(value);

    if (index === -1) {
      newSelectedItems.push(value);
    } else {
      newSelectedItems.splice(index, 1);
    }

    setSelectedItems(newSelectedItems);
  };

  const handlePageChange = (page) => {
    setNowPage(page);

  };

  const handlePrintOutput = () => {
    console.log(selectedItems);
  };

  const renderCheckboxOptions = () => {
    const pageSize = 4; // 每页显示的选项数量   
    const startIndex =0;
    const endIndex = startIndex + pageSize;
    const options = [];
    for (let i = startIndex; i < endIndex && i < nowChoice.length; i++) {
      const value = `${nowChoice[i]}`;
      const isChecked = selectedItems.includes(value);
      options.push(
        <Checkbox
          key={value}
          value={value}
          checked={isChecked}
          onChange={(e) => handleCheckboxChange(e.target.value)}
        >
          {nowChoice}
        </Checkbox>
      );
    }

    return options;
  };

  return (
    <div>
      <div style={{ width: "100%", height: "500px" }}>
        <Checkbox.Group value={selectedItems}>
          {renderCheckboxOptions()}
        </Checkbox.Group>
        <Pagination
          current={nowpage}
          total={8}
          pageSize={4}
          onChange={handlePageChange}
        />
        <Button onClick={handlePrintOutput}>打印输出</Button>

      </div>

    </div>
  )
}