Question

一旦有人单击它，我想重置徽章组件的编号。现在，该数字来自dummyData（它是一个对象数组），因此理想情况下，每次有人单击该数字时，最好重置该数字。我正在使用材质设计UI组件。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>


<div id="container" style="height: 300px; margin-top: 1em;"></div>
<button id="button">Toggle fullscreen</button>

<script>
    var chart = Highcharts.chart('container', {
        credits: {
            enabled: false
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],

        navigation: {
            buttonOptions: {
                enabled: false
            }
        }
    });

    // The button handler
    document.getElementById('button').addEventListener('click', function () {
        chart.fullscreen.toggle();
    });
</script>

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的状态

1 个答案: