使用React的Hooks+ts实现全选和全不选？

import React, { useState, useEffect } from 'react';
import { Input, List } from 'antd';
import Add from './Add';
import Progress from './Progress'
import './index.less';

const Home: React.FC = () => {

const list = [{
id: 1,
item: '数字1',
}, {
id: 2,
item: '数字2'
}, {
id: 3,
item: '数字3'
}, {
id: 4,
item: '数字4'
}];

type checkedMap = {
[id: string]: boolean
}
type item = {
id: number;
item?: string;
}
const [checked, setChecked] = useState(false);
const [checkedMap, setCheckedMap] = useState({});
const handleCheckBox = (e: React.ChangeEvent, item: item) => {
const { checked } = e.target;
const newCheckedMap: any = Object.assign({}, checkedMap, {
[item.id]: checked,
})
let arr = Object.keys(newCheckedMap)
.map((key) => newCheckedMap[key])
.filter((item) => item === true);
if (list.length === arr.length) {
setChecked(true)
} else {
setChecked(false)
}

setCheckedMap(newCheckedMap);
}
const checkedAll = () => {
list.forEach((item: item) => checkedMap[item.id] = !checked);
setChecked(!checked);
}
return (

• 数字1


• 数字2


• 数字3


• 数字4


• 数字5

<List
header={

Table

}
bordered
dataSource={list}
renderItem={(item: item) => {
const checked = checkedMap[item.id] || false;
return (
<List.Item>

<Input checked={checked} onChange={(e) => handleCheckBox(e, item)} type="checkbox" key={item.id} style={{ width: 15, height: 15, marginRight: 5 }} />

</List.Item>
)
}}
/>

)
}
export default Home;

import React from 'react'
import { Checkbox } from 'antd';

interface Iprops {
checkedAll:any,
checked:boolean,
}
const Add:React.FC = (props) => {
const {checkedAll,checked } = props;
return (
全选
)
}
export default Add;