抽屉材质-ui关闭抽屉功能问题

Question

我在我的 React 项目中使用 Material-UI，我尝试创建一个组件来呈现抽屉和其中的一些其他组件。但是我在打开抽屉功能时遇到了很多问题......我尝试简单地作为状态道具传递，但我的抽屉不会关闭......

interface Props {
  cartOpen: boolean;
}
const CartDrawer: React.FunctionComponent<Props> = ({ cartOpen }) => {
  const classes = useStyles();
  return (
    <Drawer anchor="right" open={cartOpen}>
      <div className={classes.cartDrawerDiv}>
        <div className={classes.cartTitle}>
          <List>
            <ListItem>
              <ShoppingCartIcon className={classes.icon} />
              <Typography
                style={{
                  fontFamily: "Montserrat, sans-serif",
                  fontSize: "15px",
                  fontWeight: 800,
                  marginLeft: "8px",
                }}
              >
                1 Item
              </Typography>
            </ListItem>
          </List>
        </div>
        <Divider />
      </div>
    </Drawer>
  );
};
export default CartDrawer;

使用它的组件示例...

...
<Button
              color="secondary"
              size="large"
              variant="contained"
              className={classes.buyButton}
              style={{ fontWeight: 600 }}
              onClick={() => setCartOpen(true)}
            >
              COMPRAR
            </Button>
          </div>
        </div>
      </div>
      <CartDrawer cartOpen={cartOpen} />

Answer 1

你应该添加onClose来关闭Drawer

<CartDrawer cartOpen={cartOpen} onClose={() => setCartOpen(false)} />

interface Props {
  cartOpen: boolean;
  onClose: () => void
}

const CartDrawer: React.FunctionComponent<Props> = ({ cartOpen, onClose }) => {
  const classes = useStyles();
  return (
    <Drawer anchor="right" open={cartOpen} onClose={onClose}>
...