Как обработать импортированный компонент к событию onclick вactjs? - PullRequest
Новая
       31

Как обработать импортированный компонент к событию onclick вactjs?

0 голосов
/ 08 ноября 2019

Я пытаюсь обработать компонент TimeAreaBumpGraph в кнопку, чтобы у меня была целевая страница с несколькими кнопками, отображающими графики. 

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

React 16.8.6 React-скрипты 3.0.1 Nivo 0.59.1 Axios 0.19.0 MongoDB Atlas 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, используя useState. Прямо сейчас кнопка не отображает ничего, никаких сообщений об ошибках.

Если бы я мог получить пример с кодом выше, я очень новичок, чтобы реагировать и его язык. Спасибо!

...