Question

我想通过单击按钮将数据发送到图表。

使用Recharts库创建图表。目前，我使用data在Chart.js中手动设置了data={data}。但是，如何通过单击MainForm中的按钮，如何将数据数组从另一个组件（Chart）发送到MainForm？

在我的代码中，我使用material-ui。

图表组件（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组件。

** Button所在的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;

如何通过单击另一个组件中的按钮将数据发送到一个组件中的图表？

0 个答案: