reactjs - Material UI：功能组件中的复选框，我错过了什么吗？

Question

我找到了关于在基于类的 React 组件中使用 Material UI Checkbox 组件的 SO 文章，但我正在努力让它在功能组件中工作。这很奇怪，因为 Material UI 的文档使用了功能组件。

我试图尽可能地遵循他们的文档，但我似乎无法让 Checkbox 的 handleChange 触发。复选框没有改变，但据我所知，我的代码与此处文档中的第一个示例相同：https ://material-ui.com/components/checkboxes/

这是我的组件：

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;

标签： reactjsmaterial-ui