0

我正在使用 React 库来构建一个小型登录页面，该页面下方有一个 Grid 和一个 Chart。当我单击每一行时，我想要实现的是获取最后两行的值

 <Column field="inStock" title="In stock"  cell={MyCustomCell}/>
 <Column field="lastMonth" title="In stock last month" cell={MyCustomCell}/>

并将其保存到value对象的属性中：

 const series = [
    {
      category: "Last Month",
      value: data,
    },
    {
      category: "Current Moment",
      value: data,
    },
  ];

以便从上个月的库存 td 填充 Last Month 值，并使用 In stock td 的值填充当前时刻值属性。我的代码目前用于提取和保存 Last Month td 的值，但我不知道如何同时获取另一行的值。正确的方法是什么？这是我的尝试：

import '@progress/kendo-theme-default/dist/all.css';
import './App.css';
import products from './products.json';

import React, { useState } from 'react';
import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
import {
  Chart,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem,
  ChartTitle,
} from "@progress/kendo-react-charts";


function App() {

  let [data, setData] = useState(0);

  let series = [
    {
      category: "Last Month",
      value: data,
    },
    {
      category: "Current Moment",
      value: data,
    },
  ];

  const CustomCell = (props) => {
    const field = props.field || "";
    const value = props.dataItem[field];
    return (
      <td
      onClick={() => setData( data = value)}
      >
       {value}
      </td>
    );
  };



  const MyCustomCell = (props) => <CustomCell {...props} myProp={products} />;
 
  
  return (
    <div className="App">
      <Grid data={products}>
       
      <Column field="id" title="ID"/>
      <Column field="name" title="Name"/>
      <Column field="categoryName" title="Category Name"/>
      <Column field="price" title="Price"/>
      <Column field="inStock" title="In stock"  cell={MyCustomCell}/>
      <Column field="lastMonth" title="In stock last month" cell={MyCustomCell}/>
    </Grid>
    

    <div className="chart-container">
    <Chart>
    <ChartTitle text="Items in stock In comparison with last month" />
    <ChartLegend position="bottom" />
    <ChartSeries>
      <ChartSeriesItem
        type="pie"
        data={series}
        field="value"
        categoryField="category"

      />
    </ChartSeries>
    </Chart>
    </div>

    </div>
  );
}

export default App;
4

0 回答 0