React + Ant list列表 全选反选及分页设置

React + Ant list列表 全选反选及分页设置

---

前言

因业务需要list的全选反选个别选择操作，还有分页，改造了一个list和card的样式。请直接看代码吧

---

图片展示

页面代码

代码如下（示例）：

import { HeartFilled, HeartTwoTone } from '@ant-design/icons';
import { Button, Card, Checkbox, List } from 'antd';
import React, { useState } from 'react';

interface Data {
  id: number;
  name: string;
  url: string;
}

const data = [
  { id: 1, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 2, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 3, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 4, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 5, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 6, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 7, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 8, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 9, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
  { id: 10, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
];

const ItemCard = ({ Item, handleChange }) => (

  <Card
    bordered={false}
    hoverable
    title={<Checkbox checked={Item.checked} key={Item.id} onChange={(e) => handleChange(e, Item.id)} />}
    extra={
      <Button type="link">
        <HeartTwoTone twoToneColor="#BC498A" style={{ fontSize: '25px' }} />
        <HeartFilled style={{ fontSize: '25px', color: '#BC498A' }} />
      </Button>
    }
    actions={[<div>{Item.name}</div>]}
  >

    <div style={{ textAlign: 'center' }}>
      <img alt="example" src={Item.url} style={{ width: 50 }} />
      <h1>{Item.name}</h1>
    </div>
  </Card>
);

const Group = () => {
  const [list, setList] = useState<Data[]>(data);
  const [checkedAll, setCheckedAll] = useState<boolean>(false);

  const handleCheckAll = (e) => {
    setCheckedAll(e.target.checked);
    if (e.target.checked) {
      setList(list.map((item) => ({ ...item, checked: true })));
      console.log('111', list);
    } else {
      setList(list.map((item) => ({ ...item, checked: false })));
    }
  };

  const handleCheckItem = (e, Id) => {
    const curList = list.map((item) => {
      if (item.id === Id) {
        return ({ ...item, checked: e.target.checked });
      }
      return ({ ...item });
    });

    if (curList.filter((item) => item.checked).length === list.length) {
      setCheckedAll(true);
    } else {
      setCheckedAll(false);
    }
    setList(curList);
  };

  return (
    <div >
      <Checkbox checked={checkedAll} onChange={handleCheckAll}>全选</Checkbox>
      <List
        grid={{ gutter: 16, column: 4 }}
        dataSource={list}
        pagination={{
          onChange: (page) => {
            console.log(page);
          },
          pageSize: 5,
        }}
        renderItem={(item) => (
          <List.Item>
            <ItemCard Item={item} handleChange={handleCheckItem} />
          </List.Item>
        )}
      />,
    </div>
  );
};

export default Group;