javascript - 使用react-data-grid将React.createClass方法调整为ES6类组件

Question

我正在工作 react-data-grid在 React 中创建可过滤数据表的库。他们的所有示例都使用已弃用的 React.createClass 方法，而我正在尝试重构 ES6 类组件。

具体来说，我正在尝试重构可过滤网格示例:

• demo
• source
• gist of non-refactored adaption that is working

我的重构代码如下所示:

import React from 'react'
import ReactDataGrid from 'react-data-grid'
const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons')

class FilterableTable extends React.Component {
  constructor(props) {
    super(props);

    this._columns = [
      {
        key: 'id',
        name: 'ID',
        width: 80
      },
      {
        key: 'task',
        name: 'Title',
        editable: true
      },
      {
        key: 'priority',
        name: 'Priority',
        editable: true
      },
      {
        key: 'issueType',
        name: 'Issue Type',
        editable: true
      },
      {
        key: 'complete',
        name: '% Complete',
        editable: true
      },
      {
        key: 'startDate',
        name: 'Start Date',
        editable: true
      },
      {
        key: 'completeDate',
        name: 'Expected Complete',
        editable: true
      }
    ];

    this.state = { rows: this.createRows(1001), filters: {} };
    console.log(this.state);
  }


  getRandomDate = (start, end) => {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
  }

  createRows = () => {
    let rows = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        task: 'Task ' + i,
        complete: Math.min(100, Math.round(Math.random() * 110)),
        priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
        issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
        startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()),
        completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1))
      });
    }

    return rows;
  }

  getRows = () => {
    return Selectors.getRows(this.state);
  }

  getSize = () => {
    return this.getRows().length;
  }

  rowGetter = ( rowIdx ) => {
    let rows = this.getRows();
    return rows[rowIdx];
  }

  handleFilterChange = ({ filter }) => {
    let newFilters = Object.assign({}, this.state.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }
    this.setState({ filters: newFilters });
  }

  onClearFilters = () => {
    // all filters removed
    this.setState({filters: {} });
  }

  render() {
    return (
      <ReactDataGrid
        columns={this._columns}
        rowGetter={this.rowGetter}
        enableCellSelect={true}
        rowsCount={this.getSize()}
        minHeight={800}
        toolbar={<Toolbar enableFilter={true}/>}
        onAddFilter={this.handleFilterChange}
        onClearFilters={this.onClearFilters} />);
  }

}

export default FilterableTable

问题:

当我单击过滤器按钮时出现问题 - 呈现一个新的标题行(通过工具栏组件)，但没有输入字段。此屏幕截图并排显示了两个示例 - 我的 ES6 版本在顶部，createClass 版本在底部:

我不确定是什么原因造成的，但有一种感觉，这可能是由于我导入 Toolbar 的方式造成的？任何帮助或正确方向的指出将不胜感激! (以及重构此组件的任何其他建议。)

Answer 1

要为给定列启用过滤，您需要为该列设置filterable=true。因此，将 filterable:true 添加到 this._columns 中的每个对象。欲了解更多信息，请查看http://adazzle.github.io/react-data-grid/examples.html#/filterable-grid .

this._columns = [
  {
    key: 'id',
    name: 'ID',
    width: 80
  },
  {
    key: 'task',
    name: 'Title',
    editable: true,
    filterable:true
  },
  {
    key: 'priority',
    name: 'Priority',
    editable: true,
    filterable:true
  },
  {
    key: 'issueType',
    name: 'Issue Type',
    editable: true,
    filterable:true
  },
  {
    key: 'complete',
    name: '% Complete',
    editable: true,
    filterable:true
  },
  {
    key: 'startDate',
    name: 'Start Date',
    editable: true,
    filterable:true
  },
  {
    key: 'completeDate',
    name: 'Expected Complete',
    editable: true,
    filterable:true
  }
];