如何在React Table-React

时间：2018-12-10 17:25:59

标签： javascript reactjs react-table

我正在研究React Table。我基本上是React的初学者。我有一个仪表板页面，其中显示8列的React Table。我有一个自定义按钮，它将打开一个弹出页面，此弹出页面有8个复选框，可让我显示/隐藏那些React列。最初，此弹出页面中的所有复选框均设置为true。当我取消选中某个列时，该特定列将被禁用。

第一个图像仅具有列（没有子列，但在现实生活中，我将不得不使用子列）。同样在第一个图像中有8个复选框。在现实生活中是10。第二张图片基本上显示了基本列。我基本上是在告诉您，因为这些图像与我的功能并非100％相关。它显示了一个基本思想

Image which basically shows the checkboxes, the column names are updated now

Image which basically shows the 8 columns and their sub columns

这是我的列数据（总共8列，第1到5列，第7列有一个子列，而第6列和第8列有多个子列）

我需要在列1至5的1级标题（超级标题）和2级标题上应用show / hide过滤器。列6至8始终可见。

请注意，我的项目中有一个常量文件。每当我在其他组件中使用该文件的全局常量时，我​​都将其导入。

应该提到的是，React Table具有一个名为show的属性（默认值为true，但我们可以通过将其设置为false来隐藏列）

const Constants = {
  columnShowHide: [
    { id: 1, value: true },
    { id: 2, value: true },
    { id: 3, value: true },
    { id: 4, value: true },
    { id: 5, value: true },
    { id: 6, value: true },
    { id: 7, value: true },
    { id: 8, value: true },
    { id: 9, value: true },
    { id: 10, value: true },
  ]
};

export { Constants as default };

这是复选框弹出页面的代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import ButtonComponent from '../../common/button/ButtonComponent';
import { CheckBox } from '../../common/chkbox/CheckBox';
import Constants from '../../../util/constants';

class CustomizedView extends Component {
  constructor(props) {
    super(props);
    this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
    this.state = {
      items: [
        { id: 1, value: 'Sub Column 1', isChecked: true },
        { id: 2, value: 'Super Column 1', isChecked: true },
        { id: 3, value: 'Sub Column 2', isChecked: true },
        { id: 4, value: 'Super Column 2', isChecked: true },
        { id: 5, value: 'Column 5', isChecked: true },
        { id: 6, value: 'Column 6', isChecked: true },
        { id: 7, value: 'Column 7', isChecked: true },
        { id: 8, value: 'Column 8', isChecked: true },
        { id: 9, value: 'Column 7', isChecked: true },
        { id: 10, value: 'Column 8', isChecked: true },
      ]
    };
  }

  handleClick() {
    this.setState({ isChecked: !this.state.isChecked });
  }

  handleCheckChildElement(event) {
    const { items } = this.state; //extract state values like this to a const variable
    const newItems = items.map((item) => { //do map on items because map returns a new array. It’s good practice to use .map than forEach in your case
      if(item.value === event.target.value) {
        item.isChecked = event.target.checked;
        return item; //return updated item object so that it will be pushed to the newItems array
      }
      return item; // return item because you need this item object as well
    });
    this.setState({ items: newItems }); //finally set newItems array into items


Constants.columnShowHide[0].value = items[0].isChecked;
Constants.columnShowHide[1].value = items[1].isChecked;
Constants.columnShowHide[2].value = items[2].isChecked;
Constants.columnShowHide[3].value = items[3].isChecked;
Constants.columnShowHide[4].value = items[4].isChecked;
Constants.columnShowHide[5].value = items[5].isChecked;
Constants.columnShowHide[6].value = items[6].isChecked;
Constants.columnShowHide[7].value = items[7].isChecked;
console.log('From constant file after ' + JSON.stringify(Constants.columnShowHide));
  }

  render() {
    return (
      <div className='div-container-custom' >
        <div className='bottomBar'>
          <ButtonComponent
            text='Apply'
            className='activeButton filterMargin-custom'
            width='100'
            display='inline-block'
            onClick={() => { this.props.applyFilter(this.state, false); }}
          />
          <ButtonComponent
            text='Clear Filter'
            className='greyedButton clear-custom-filter'
            width='100'
            display='block'
            marginTop='60'
            onClick={() => { this.props.clearFilter(this.state, true); }}
          />
        </div>
        <div>
          <div className='data-points-text'>
            <span> Columns </span>
          </div>
          <div className="App">
            <ul>
              {
                this.state.items.map((item, i) => {
                  return (<div key={i} ><CheckBox handleCheckChildElement={this.handleCheckChildElement} {...item} /></div>);
                })
              };
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

CustomizedView.propTypes = {
  applyFilter: PropTypes.func.isRequired
};

CustomizedView.defaultProps = {
};

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);

现在我需要使用常量来修改我的ReactTableComponent

这是我在React Table组件中的列数据

const columns = [
 {
    Header: 'Column 1',
        columns: [
           {
               Header: 'S Column 1',
               accessor: 'firstName',
               show : some_var (if this is true,column/sub column in shown, else hidden )
           }
      ]
  },
  {
      Header: 'Column 2',
       columns: [
         {
            Header: 'S Column 2',
            accessor: 'firstName'
          }
       ]
     },
    {
            Header: 'Column 3',
            columns: [
    {
            Header: 'S Column 3',
            accessor: 'firstName'
          }
         ]
   },
    {
          Header: 'Column 4',
          columns: [
    {
            Header: 'S column 4',
            accessor: 'firstName'
     }
    ]
      },
     {
     Header: 'Column 5',
    columns: [
    {
    Header: 'S column 5',
     accessor: 'firstName'
    }
   ]
   },
  {
     Header: 'Column 6',
     columns: [
  {
        Header: 'S column 6a',
        accessor: 'firstName'
  },
   {
        Header: 'S column 6b',
        accessor: 'firstName'
    },
    {
        Header: 'S column 6c',
        accessor: 'firstName'
     },
    {
         Header: 'S column 6d',
         accessor: 'firstName'
    }
  ]
     },
      {
     Header: 'Column 7',
     columns: [
     {
      Header: 'S column 7',
         accessor: 'firstName'
   }
    ]
     },
      {
        Header: 'Column 8',
        columns: [
      {
       Header: 'S Column 8a',
       accessor: 'firstName'
      },
     {
       Header: 'S Column 8b',
       accessor: 'firstName'
     },
    {
    Header: 'S Column 8c',
    accessor: 'firstName'
    },
    {
      Header: 'S Column 8d',
      accessor: 'firstName'
      }
     ]
      },
      ];

现在，我可以在任何组件中导入Constants.js中的10个布尔标志。它在整个项目中都可用。我已经通过安慰检查了。

最初所有标志都是正确的，所以当复选框弹出页面打开时，所以当我取消选中并按Apply按钮时，特定的列/子列将被隐藏。

可以通过clearFilters函数将复选框的值设置为初始状态。所有列和子列应在clearFilter之后显示

现在，由于我是React的初学者，因此我应该在Apply and clear按钮的功能中编写什么以实现我想要的想法。我的功能不正确。同样，在按下applyFilter / clearFilter之后，我需要更新全局常量，并在ReactTableComponent中使用它们，以使用ReactTable的show属性来显示/隐藏列/子列。

我没有使用Redux或任何复杂的东西。我有一个工作常量文件，我想用它来实现这一点。请帮助我实现这一目标

0 个答案:

没有答案
相关问题
最新问题