在 React 中使用 MUI 重置其他组件 onClick 的状态

Question

我正在尝试在有人点击后重置徽章组件的数量。现在这个数字来自 dummyData（它是一个对象数组）所以理想情况下，每次有人点击它时重置这个数字会很好。我正在使用 material 设计 UI 组件。

export const sampleContent = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleOpen = (e) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = (e) => {
        setAnchorEl(null);
    };

    return (
        <div>
            <IconButton color="primary">
                <Badge
                    badgeContent={dummyData.length}
                    color="error"
                >
                    <NotificationsIcon
                        onClick={handleOpen}
                    />
                </Badge>
            </IconButton>
            <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
            >
                <MenuList>
                    <MenuItem
                        onClick={handleClose}
                    >
                        <p>Title</p>
                        <p>Description</p>
                    </MenuItem>
                 </MenuList>
            </Menu>
        </div>
    );
};

Answer 1

有多种方法可以解决这个问题。理想情况下，您可能会传入要使用的数据。例如，让 SampleContent 在单击徽章时接受回调，然后更新父状态并将新的 dummyData 数组传递到 SampleContent。或者，您可以只使用本地状态并在单击时重置状态。这是基于您的代码的 example。

import React from "react";
import "./styles.css";
import { Badge, IconButton, Menu, MenuItem, MenuList } from "@material-ui/core";
import { Notifications as NotificationsIcon } from "@material-ui/icons";

const SampleContent = ({ dummyData }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [alerts, setAlerts] = React.useState(dummyData.length);

  const handleOpen = e => {
    setAlerts(0);
    setAnchorEl(e.currentTarget);
  };

  const handleClose = e => {
    setAnchorEl(null);
  };

  return (
    <div>
      <IconButton color="primary">
        <Badge badgeContent={alerts} color="error">
          <NotificationsIcon onClick={handleOpen} />
        </Badge>
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuList>
          <MenuItem onClick={handleClose}>
            <p>Title</p>
            <p>Description</p>
          </MenuItem>
        </MenuList>
      </Menu>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SampleContent dummyData={[1, 2, 3]} />
    </div>
  );
}

希望对您有所帮助！

在 React 中使用 MUI 重置其他组件 onClick 的状态

Reset the state of other component onClick using MUI in React

notifications

state

reactjs

material-ui

react-hooks