import React, { useState } from 'react';
import { Card, Row, Col, Checkbox } from ‘antd’;
const { Meta } = Card;
interface Data {
id: number;
name: string;
price: number;
url: string;
[name: string]: any;
}
// 测试数据
const data = [
{ id: 1, name: 'test1', price: 10, url: 'xxxxx' },
{ id: 2, name: 'test2', price: 100, url: 'xxxxx' },
{ id: 3, name: 'test3', price: 1000, url: 'xxxxx' },
{ id: 4, name: 'test4', price: 108, url: 'xxxxx' },
{ id: 5, name: 'test5', price: 108, url: 'xxxxx' },
];
const GoodsCard = ({ goods, handleChange }) => (
<Card
hoverable
cover={<img alt="example" src={} />}
actions={[
<Checkbox checked={} key={} onChange={e => handleChange(e, )}>
复制商品
</Checkbox>,
]}
>
<Meta
description={(
<div>
{}
</div>
)}
/>
</Card>
);
const GoodsList = () => {
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 })));
} else {
setList(list.map(item => ({ ...item, checked: false })));
}
};
const handleCheckItem = (e, goodsId) => {
const curList = list.map((item) => {
if (item.id === goodsId) {
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 (
<Card
title="商品列表”
extra={<Checkbox checked={checkedAll} onChange={handleCheckAll}>全选</Checkbox>}
>
<Row gutter={16}>
{
(goods => (
<Col span={4}>
<GoodsCard goods={goods} handleChange={handleCheckItem} />
</Col>
))
}
</Row>
</Card>
);
};
export default GoodsList;