Reactjs 材料界面：功能组件中的复选框，我是否遗漏了什么？

我在基于类的React组件中找到了使用materialui复选框组件的文章，但是我很难让它在功能组件中工作。这很奇怪，因为MaterialUI中的文档使用功能组件

我正试图尽可能地关注他们的文档，但我似乎无法启动复选框的handleChange。复选框不变，但据我所知，我的代码与文档中的第一个示例相同：

以下是我的组件：

import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import Checkbox from "@material-ui/core/Checkbox";
import Avatar from "@material-ui/core/Avatar";
import CardHeader from "@material-ui/core/CardHeader";

const useStyles = makeStyles(theme => ({
  card: {
    display: "flex",
    flexDirection: "column"
  },
  header: {
    display: "flex",
    flexDirection: "row"
  },
  content: {
    flexDirection: "row",
    flex: "2"
  },
  cover: {
    display: "flex"
  },
  avatar: {
    width: "100px"
  },
  large: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const SelectSpeciesCard = ({ speciesImg, speciesGeneralName }) => {
  const [checked, setChecked] = React.useState(true);

  const handleChange = event => {
    // <-- Can't get this to work
    console.log("Checkbox checked");
    setChecked(event.target.checked);
  };

  const classes = useStyles();
  const theme = useTheme();
  return (
    <Card className={classes.card}>
      <CardHeader
        className={classes.header}
        avatar={<Avatar src={speciesImg} className={classes.large} />}
        action={
          <Checkbox
            checked={checked}
            value="secondary"
            color="primary"
            inputProps={{ "aria-label": "secondary checkbox" }}
            onChange={handleChange}
          />
        }
        title={speciesGeneralName}
      />
    </Card>
  );
};

export default SelectSpeciesCard;

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles，useTheme}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/CardHeader”导入CardHeader；
const useStyles=makeStyles（主题=>({
卡片：{
显示：“flex”，
flexDirection：“列”
},
标题：{
显示：“flex”，
flexDirection：“行”
},
内容：{
flexDirection:“行”，
弹性：“2”
},
封面：{
显示：“flex”
},
化身：{
宽度：“100px”
},
大型：{
宽度：主题。间距（7），
高度：主题。间距（7）
}
}));
const SelectSpeciesCard=（{speciesImg，speciesGeneralName}）=>{
const[checked，setChecked]=React.useState（true）；
const handleChange=事件=>{
//将您的代码复制/粘贴到中，可以正常工作。是否有任何错误？发生了什么？您看到了什么？感谢您的帮助，@DrewReese。复选框保持选中状态，不会更改。我甚至从沙盒中复制了您的代码以查看会发生什么，但它不会更新复选框。我看到您添加了useState和useEffect，我也尝试过添加这些，但没有效果。我在添加useEffect时注意到的是，现在每次渲染卡时，我都会得到一个控制台日志。但是，当我单击复选框时，什么也没有发生，我似乎不明白，请看这里：很抱歉，Gif不起作用，它只显示我单击了复选框，并且仍然保持选中状态。一请注意，我不知道这是否有帮助，但我正在从基于类的父组件渲染此组件的实例，并传递道具以显示数据，不确定这是否是导致此问题的原因？您介意在此处或其他代码沙盒中共享该代码吗？