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>
)
}
在react关于antd中的checkbox后台请求分页之后存储之前选中的值
最新推荐文章于 2023-10-17 10:24:52 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)