Как отправить данные на диаграмму в одном компоненте, нажав кнопку в другом компоненте? - PullRequest
Новая
       10

Как отправить данные на диаграмму в одном компоненте, нажав кнопку в другом компоненте?

0 голосов
/ 28 декабря 2018

Я хочу отправить данные на график, нажав кнопку.

Диаграмма создана с использованием библиотеки Recharts .В настоящее время я устанавливаю data вручную в Chart.js, используя data={data}.Но как я могу отправить массив данных из другого компонента (MainForm) в Chart, нажав кнопку в MainForm?

В моем коде я использую material-ui .

Компонент Chart (Chart.js) 

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import './Chart.css';

const data = [
    {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
    {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
    {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
    {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
    {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
    {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
    {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

function Chart() {
    return (
        <React.Fragment>
            <LineChart width={600} height={300} data={data}
                margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                <XAxis dataKey="name"/>
                <YAxis/>
                <CartesianGrid strokeDasharray="3 3"/>
                <Tooltip/>
                <Legend />
                <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
            </LineChart>
        </React.Fragment>
    );
}

export default Chart;

Это компонент MainForm.

** Компонент MainForm, в котором расположена кнопка:**

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button';
import Chart from './chart/Chart';


class MainForm extends React.Component {
  state = {
    data: [
        {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
        {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
        {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
        {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
        {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
        {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
        {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
    ];
  };

  sendData = () => {
    // What should I do here to send data to "Chart" component?
  };

  render() {
    return (
      <React.Fragment>
            <Chart />
            <Button variant="contained" color="primary" onClick={this.sendData}>
                Send data
            </Button>
      </React.Fragment>
    );
  }
}

MainForm.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default MainForm;
...