代码之家 › 专栏 › 技术社区 › Yash Nigam

当我在select标记中更改选择时,如何重新呈现整个React Pivot表UI组件?

pivottable.js react-table reactjs javascript

Yash Nigam · 技术社区 · 7 年前

我是react js的新手,我正在尝试使用react pivot table创建一个pivot表。我希望能够使用select下拉菜单选择一个数据集,并在下拉选择发生更改时更新状态并重新呈现完整的表,就像这里显示的jquery示例一样 https://pivottable.js.org/examples/rcsvs.html

它在我对透视表进行任何选择或更改之前工作。我能够在两个数据集和透视表中的状态更改之间切换。但是当我选择一个pivot维度并使用pivot表时,在这一点之后,更改select菜单并不能帮助我更改pivot表的状态。请帮忙。

这是我的密码。

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';


// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);



const data1 = [{'Country':'USA','Sales':45000}, 
{'Country':'USA','Sales':50000},{'Country':'CA','Sales':15000}]

const data2 = [{'Product':'Sofa','Sales':5000},{'Product':'Dinner 
Table','Sales':50000},{'Product':'Chair','Sales':15000}]

const dataDic = {'Region':data1,'Products':data2}



class App extends React.Component {


constructor(props) {
  super(props);
  this.state = {selectedOption: 'Region'};
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
  this.setState({selectedOption: event.target.value});

}


handleSubmit(event) {
  alert('You have selected ' + this.state.selectedOption);
  event.preventDefault();
}


render() { 


    return <div>
              <select defaultValue="Region" onChange={(e)=>   
 this.handleChange(e)}>
                    <option  value="Region">Region</option>
                    <option value="Products">Products</option>
              </select>
              <br/>
              <br/>

              <PivotTableUI
                  data={dataDic[this.state.selectedOption]}
                  onChange={s => this.setState(s)}

           renderers={Object.assign({},TableRenderers)}//,PlotlyRenderers)}
                  {...this.state}
              />

            </div>;
     }
 }



export default App;

1 回复 | 直到 7 年前

trkaplan 7 年前

Working code sandbox

有两个问题;

s => this.setState(s) 在数据透视表的onChange属性中。当页面启动时,容器( Grid )州仅包含 selectedOption:"Region"

{...this.state} 支持 PivotTableUI 组件,将容器状态中的所有键作为道具传递,包括 data (如上图截图所示)。而这个覆盖了财产, data={dataDic[this.state.selectedOption]} 在此之后,更改为 selectedOption 状态不会重新呈现 数据透视表UI

s=>此.setState(个) 具有 this.setState({ pivotTableUIConfig: s });
pivotTableUIConfig 不包含数据属性的变量。(已使用) ES7 Object Rest Operator to Omit 数据属性)

//拾取除“数据”以外的所有属性
{...本州} {...pivotTableUIConfig}

user3875349 6 年前

遇到了相同的问题并找到了一个简单的解决方法。问题是 data {...state} . 因此,我们可以在将数据传递给state之前将其分配给state PivotTableUI 道具不再需要了。

const state = {...this.state};
state['data'] = dataDic[this.state.selectedOption];
return (
  <PivotTableUI
      onChange={s => this.setState(s)}
      {...state}
  />
)

Joe Davis 6 年前

<PivotTableUI
  data = {[{}]}
  onChange={ s =>{ 
    delete s.data
    this.setState(s)
  }}
  {...this.state}
/>

这不会覆盖父类中的数据,并将自动使用更新的数据呈现