Question

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

最后有图像可以看到我要做什么。

我将使用此逻辑显示隐藏列（此问题是两天后我问的）- How to show and hide some columns on React Table?

React Table数据是这样的

const columns = [
 {
    Header: 'Column 1',
    accessor: 'firstName',
  },
  {
    Header: 'Column 2',
    accessor: 'firstName',
  },
  {
    Header: 'Column 3',
    accessor: 'firstName',
  },
  {
    Header: 'Column 4',
    accessor: 'firstName',
  },
  {
    Header: 'Column 5',
    accessor: 'firstName',
  },
  {
    Header: 'Column 6',
    accessor: 'firstName',
  },
  {
    Header: 'Column 7',
    accessor: 'firstName'
  },
  {
    Header: 'Column 8',
    accessor: 'firstName',
  }
];

仪表板页面的开始

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
          filterState: {},
          searchText: '',
          isFilterOpen: false,
          isCustomizedOpen: false,
          isFiltered: false,
          isSearched: false,
          searchedTableData: [],
          filteredTableData: [],
        };
         this.handleCustClickinv = this.handleCustClickinv.bind(this);
    }

这是我的仪表板页面的渲染功能中的代码，用于显示自定义按钮（此代码写在父仪表板页面中）

{this.state.isCustomizedOpen && <CustomizedView
          filterState={this.state.filterState}
          applyFilter={(values, clear) => { this.applyFilters(values, clear); }}
        />}

这是“自定义”按钮的代码（写在父仪表板页面中）

<div className="custom-div-dashboard" onClick={() => { this.handleCustClickinv(); }}>
            <div className='customize-view-dashboard'>Customized View </div>
          </div>

这是处理单击自定义按钮的功能（写在父仪表板页面中）

handleFilterClickinv() {
    if(this.state.isCustomizedOpen) {
      this.setState({ isCustomizedOpen: false });
    }
    const currentState = this.state.isFilterOpen;
    this.setState({ isFilterOpen: !currentState });
  }

这是我的整个弹出页面，将有8个复选框

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import './enqCustomizedView.scss';
import ButtonComponent from '../../shared/button/ButtonComponent';
import { CheckBox } from '../../shared/chkbox/CheckBox';

class CustomizedView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, value: 'Column 1', isChecked: true },
        { id: 2, value: 'Column 2', isChecked: true },
        { id: 3, value: 'Column 3', isChecked: true },
        { id: 4, value: 'Column 4', 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 },
      ]
    };
      this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
  }

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

  handleCheckChildElement(event) {
    //let items = this.state.items;
    let { items } = this.state;
    items.forEach(items = () => {
      if(items.value === event.target.value) {
        items.isChecked = event.target.checked;
      }
    });
    this.setState({ items });
    const column1checked = items[0].isChecked;
    console.log('column1checked ' + column1checked);
    const column2checked = items[1].isChecked;
    console.log('column2checked ' + column2checked);
    const column3checked = items[2].isChecked;
    console.log('column3checked ' + column3checked);
    const column4checked = items[3].isChecked;
    console.log('column4checked ' + column4checked);
    const column5checked = items[4].isChecked;
    console.log('column5checked ' + column5checked);
    const column6checked = items[5].isChecked;
    console.log('column6checked ' + column6checked);
    const column7checked = items[6].isChecked;
    console.log('column7checked ' + column7checked);
    const column8checked = items[7].isChecked;
    console.log('column8checked ' + column8checked);
  }

  render() {
    return (
      <div className='popup-page-custom' >
        <div className='bottomBar'>
          <ButtonComponent
            text='Apply'
            className='activeButton filterMargin'
            width='100'
            display='inline-block'
            onClick={() => { this.props.applyFilter(this.state, false); }}
          />
          <ButtonComponent
            text='Clear Filter'
            className='greyedButton clear-filter'
            width='100'
            display='block'
            marginTop='60'
            onClick={() => { this.props.applyFilter(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);

最终这是我的复选框页面

import React from 'react';
import PropTypes from 'prop-types';

export const CheckBox = (props) => {
  // super(props);
  return (
    <li>
      <input key={props.id} onClick={props.handleCheckChildElement} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
    </li>
  );
};

CheckBox.propTypes = {
  id: PropTypes.string,
  handleCheckChildElement: PropTypes.func,
  isChecked: PropTypes.bool,
  value: PropTypes.string,
};

CheckBox.defaultProps = {
  id: '',
  handleCheckChildElement: null,
  isChecked: null,
  value: '',
};

export default CheckBox;

这是我的仪表板页面和弹出页面的非常基本（丑陋的）样式

这是我在取消选中复选框时在Chrome上看到的错误

编辑1-根据Alireza Yadegari的建议，我进行了1行更改。但是我仍然遇到2个错误。

编辑2-按照Alireza Yadegari的建议，我应用了控制台。

Answer 1

您必须在构造函数中使用这段代码

this.handleCheckChildElement = this.handleCheckChildElement.bind(this)

Answer 2

let { items } = { ...this.state };

这是错误的.... 首先，您将数组分解为对象，然后说从给定对象中给我道具...当然这是错误的

const { items} = this.state;

从国家那里拿道具道具

最后....用foreach实现任务是一个坏主意...

CheckBox.defaultProps = {
   id: '', 
   handleCheckChildElement: null,
   isChecked: null, value: '', 
};

我不明白它的作用。你知道吗？

Answer 3

我认为您的项目只是一个示例，不需要进一步的示例。我只是说说你的错误。

首先，当您使用方法时，最好使用'bind（this）'来显示react方法在哪里。

第二，当您使用状态时，react只允许您在构造函数中对其进行更改，而无论您想更改它的位置，都必须使用'setState'方法（您可以在react文档中阅读其原因）。< / p>

最后，如果您的状态中有一个数组，则必须在某个临时对象中获取一个数组，请更改临时对象，然后使用“ setState”方法应用更改。如果您还有其他问题，请随时提问。

显示隐藏的React Table列时出现错误-React JS

3 个答案: