Question

我正在尝试将组件TimeAreaBumpGraph处理为一个按钮，这样我就可以拥有一个带有多个显示图形的按钮的登录页面。

<button onClick={TimeAreaBumpGraph}>
  Time Graph
</button>

反应16.8.6 反应脚本3.0.1 尼沃0.59.1 Axios 0.19.0 MongoDB地图集 Windows 10

import React, { useState } from "react";
import CalendarHeatmap from "../components/visualizations/system/CalendarHeatmap";
import TimeAreaBumpChart from 
import axios from "axios";
import { Button } from "@material-ui/core";

export default function SystemData(props) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleLoading = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  const heatGetData = async () => {
    handleLoading();
    const res = await axios.post("/incidents/heatmap_all");
    setData(res.data);
    console.log(data);
  };

  return (
    <div className="div-a">
      <h1>Orange County EMS Analytics</h1>
      <Button variant="contained" color="secondary" onClick={heatGetData}>
        Call Volume Heatmap Calendar
      </Button>
      <span>{loading ? "Loading Data..." : null}</span>
      {data ? (
        <>
          <h2>Total Call Volume by Day</h2>
          <CalendarHeatmap calendarData={data.heatmapData_all} />
        </>
      ) : null}
      <div className="div-b">
        <TimeAreaBumpChart />
      </div>
    </div>
  );
}

我希望输出是一个显示图TimeAreaBumpChart的按钮，就像使用Calendarheatmap的{{1}}一样。现在，该按钮不显示任何内容，没有错误消息。

如果我能用上面的代码举一个例子，我是一个新的反应者。谢谢！

如何在Reactjs中处理导入的组件到onclick事件？

0 个答案: