Как отобразить весь компонент пользовательского интерфейса React Pivot Table при изменении выделения в теге select? - PullRequest
Новая
       31

Как отобразить весь компонент пользовательского интерфейса React Pivot Table при изменении выделения в теге select?

0 голосов
/ 29 октября 2018

Я новичок в реагировании на js и пытаюсь создать сводную таблицу, используя React Pivot table. Я хочу иметь возможность выбирать набор данных с помощью выпадающего меню выбора, обновлять состояние и заново отображать полную таблицу всякий раз, когда происходит изменение в выпадающем списке, как в примере jquery, показанном здесь https://pivottable.js.org/examples/rcsvs.html

Это работает, прежде чем я сделаю какие-либо выборы или изменения в сводной таблице. Я могу переключаться между 2 наборами данных и изменениями состояния в сводной таблице. Но когда я выбираю размер сводной таблицы и использую сводную таблицу, после этого момента изменение меню выбора не помогает мне изменить состояние сводной таблицы. Пожалуйста, помогите.

Вот мой код. 

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 Ответ

0 голосов
/ 30 октября 2018

Рабочий код песочницы

Было две проблемы;

  1. s => this.setState(s) в свойстве сводной таблицы onChange. Это переопределяет корневое состояние со всеми реквизитами вашей сводной таблицы. Когда ваша страница инициирована, состояние контейнера (Grid) содержит только selectedOption:"Region", но после взаимодействия с сводной таблицей контейнер получает все реквизиты сводной таблицы. Скриншот: State of the Container after receiving props

  2. {...this.state} prop в компоненте PivotTableUI, передает все ключи как реквизиты в состоянии контейнера, включая data. (Как видно на скриншоте выше). И это переопределяет свойство data, data={dataDic[this.state.selectedOption]} После этого изменение на selectedOption состояние не перерисовывает PivotTableUI

Решение

  1. Изменить s => this.setState(s) с this.setState({ pivotTableUIConfig: s });

  2. Определите переменную pivotTableUIConfig, которая не включает свойство данных. (Используется ES7 оператор покоя объекта для пропуска свойство данных)

    // Выбор всех свойств, кроме «данных» const {data, ... pivotTableUIConfig} = this.state.pivotTableUIConfig;

  3. Изменить {...this.state} с {...pivotTableUIConfig}

...