如何解决错误 类型"更改事件<unknown>"不能分配给类型"更改事件<MouseEvent>"。使用 React 和 TypeScript

Question

在App.tsx中，Material UI的分页组件在其内部接收一个onchange。然而，当它传递给组件时，我得到以下错误:类型的参数'ChangeEvent'不能分配给类型的参数'ChangeEvent'。类型"unknown"不能赋值给类型"MouseEvent"。

为了解决这个问题，我尝试只使用onChange={handleChange}，但由于我使用TypeScript，我需要在参数中传递类型。我也试过使用onChange={(e) =>handleChange(e, page)}，但是，不工作。

我希望点击">"图标将转到下一页，更改为新页面的卡片。当点击图标&;&;&;转到上一页，切换到卡片。当点击页码时，也会发生同样的情况。

import React, { useState } from "react";
import {
Pagination,
Box,
Button,
Card,
CardActionArea,
CardActions,
CardContent,
CardMedia,
Grid,
Typography
} from "@mui/material";
import { usePagination } from "./UsePagination";
import { default as data } from "./DATA.json";
export default function App() {
let [page, setPage] = useState(1);
const PER_PAGE = 6;
const count = Math.ceil(data.length / PER_PAGE);
const _DATA = usePagination(data, PER_PAGE);
const handleChange = (
event: React.ChangeEvent<MouseEvent>,
pageCurrent: number
) => {
setPage(pageCurrent);
_DATA.jump(pageCurrent);
};
return (
<Box sx={{ flexGrow: 1, margin: "0 2rem" }}>
<Pagination
count={count}
size="large"
page={page}
variant="outlined"
shape="rounded"
// onChange={handleChange}
onChange={(e) => handleChange(e, page)}
/>
<Grid
container
justifyContent="center"
spacing={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8 }}
className="GRID1"
>
{data.map((item, id) => {
return (
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
xl={2}
sx={{
display: "flex",
justifyContent: "center",
marginTop: "1rem"
}}
>
<Card
key={item.id}
sx={{
p: "1rem",
boxShadow: 4,
maxWidth: {
xs: "250px",
sm: "250px",
md: "280px",
lg: "300px",
xl: "300px"
}
}}
>
<CardActionArea>
<CardMedia component="img" height="140" image={item.img} />
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{item.title}
</Typography>
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with
over 6,000 species, ranging across all continents except
Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small">Favorite</Button>
</CardActions>
</Card>
</Grid>
);
})}
</Grid>
</Box>
);
}

let [page, setPage] = useState(1)是一种状态，表示从哪个页面开始分页。

const PER_PAGE = 6存储每页显示的卡片数量。

const count = Math.ceil(data. ceil)length/PER_PAGE)存储页数。

链接CodeSandBox

Ps:数据来自一个mock .json.

Answer 1

根据Pagination组件的MUI文档，似乎React.ChangeEvent<unknown>是您正在寻找的类型。

// onChange
// Callback fired when the page is changed.
function(event: React.ChangeEvent<unknown>, page: number) => void
// event: The event source of the callback.
// page: The page selected.

您可以为您的用例尝试的示例:

const handleChange = (
event: React.ChangeEvent<unknown>,
pageCurrent: number
) => {
setPage(pageCurrent);
_DATA.jump(pageCurrent);
};