ReactJS FixedDataTable 排序和过滤示例不起作用

Question

我正在尝试遵循这个 ReactJS 教程：

第 1 部分：http://4dev.tech/2015/12/reactjs-datatable-with-sort-filter-and-pagination-example-part-1/

第 2 部分：http://4dev.tech/2016/03/tutorial-sorting-and-filtering-a-reactjs-datatable/

我成功完成了第 1 部分，我需要一些帮助才能完成第 2 部分。

这是我的第 2 部分代码：

import React from 'react';
import {Table, Column, Cell} from 'fixed-data-table';

class MyTable extends React.Component {

  constructor(props) {
    super(props);
      this.rows = [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
             "country":"Argentina","ip_address":"247.180.226.89"},
              {"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
             "country":"South Africa","ip_address":"27.146.70.36"},
              {"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
             "country":"Colombia","ip_address":"103.52.74.225"},
             ]
    this.state = {
      filteredDataList: this.rows
    };
  }

_renderHeader(label, cellDataKey) {
  return <div>
        <span>{label}</span>
          <div>
            <br />
            <input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
          </div>
      </div>;
}

_onFilterChange(cellDataKey, event) {
  if (!event.target.value) {
    this.setState({
      filteredDataList: this.rows,
    });
  }
  var filterBy = event.target.value.toString().toLowerCase();
  var size = this.rows.length;
  var filteredList = [];
  for (var index = 0; index < size; index++) {
    var v = this.rows[index][cellDataKey];
    if (v.toString().toLowerCase().indexOf(filterBy) !== -1) {
      filteredList.push(this.rows[index]);
    }
  }
  this.setState({
    filteredDataList: filteredList,
  });
}

  render() {
      return <Table
        height={40+((this.rows.length+1) * 30)}
        width={1150}
        rowsCount={this.rows.length}
        rowHeight={30}
        headerHeight={30}
        rowGetter={function(rowIndex) {return this.rows[rowIndex]; }.bind(this)}>
        <Column dataKey="id" width={50} label="Id"
            headerRenderer={this._renderHeader.bind(this)}/>
        <Column dataKey="first_name" width={200} label="First Name" />
        <Column  dataKey="last_name" width={200} label="Last Name" />
        <Column  dataKey="email" width={400} label="e-mail" />
        <Column  dataKey="country" width={300} label="Country" />
      </Table>;
  }
}

module.exports = MyTable;

数据表显示，但不显示用于过滤行的输入字段。

浏览器控制台没有显示任何错误，除了一些警告：

`rowGetter` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond. 
Please use the cell API in Column to fetch data for your cells.
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`label` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond. 
Please use `header` instead.
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`dataKey` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond. 
Please use the `cell` API to pass in a dataKey
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`headerRenderer` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond. 
Please use the `header` API to pass in a React Element instead.
Read the docs at: https://fburl.com/FixedDataTable-v0.6

我不知道问题是什么。 感谢您的宝贵时间。

Answer 1

这个问题与您的固定数据表版本有关。请在此处查看此 v0.6 API 迁移：https://facebook.github.io/fixed-data-table/v6-migration.html

Answer 2

虽然这个问题已经有一年了，但我最近遇到了类似的麻烦，可以分享我的经验。另外，我不知道您对 React 的熟悉程度如何，但我会尝试以对初学者友好的方式进行解释以帮助其他人，如果有任何明显的地方请多多包涵。

因此，您遇到的浏览器错误是由于另一个答案中提到的 API 更改造成的。您引用的教程使用的是旧 API。新的 API 更改涉及一些事情。也就是说，您将无法再访问 rowGetter、headerDataGetter、headerRenderer、dataKey 和 label 等。

新的 API 涉及将数据直接提供到单元组件中，我将对此进行演示。

首先，您现在可以制作自定义单元格，这样您就可以将它们设置为具有您想要的行为。我们将创建一个文本单元格类MyTextCell 来显示网格内的文本，以及一个标题单元格类SortHeaderCell，我们可以单击它来对列进行排序，并显示一个显示排序顺序的箭头。您也可以为您的电子邮件列添加自定义单元格类，以创建电子邮件地址链接。

我将首先介绍排序，因为我认为它更难。这基本上使用与文档中的示例相同的方法。

现在你现在拥有的数据只是一个数组，这很好。但是，文档使用 DataListWrapper 类，它有一个包含您的数据的 _data 属性，以及另一个用于排序索引的 _indexMap 属性，所以让我们这样做（请注意，如果您正在查看文档中的示例，我稍微改了一下）：

class DataListWrapper {
  constructor(indexMap, data) {
      this._indexMap = indexMap;
      this._data = data;
  }

  getSize() {
      return this._indexMap.length;
  }

  getObjectAt(index) {
      let sortedIdx = this._indexMap[index];
      return this._data[sortedIdx];
  }
}

您可以将前面提到的自定义单元格类型制作为无状态组件，例如我们的自定义文本单元格：

 const MyTextCell = ({ rowIndex, field, data, ...props }) => {
    return (
        <Cell {...props}>
            {data.getObjectAt(rowIndex)[field]}
        </Cell>
    );
 }

或者，您可以像在此自定义排序标题单元格中一样使它们有状态。没有理由各有一个，我只是想展示这两种选择：

    class SortHeaderCell extends React.Component {
      constructor(props) {
      super(props);
      this._onSortChange = this._onSortChange.bind(this);
     }
    render() {
       
        let {onSortChange, sortDir, children, ...props } = this.props;
        console.log(this.props)
        return (
          <Cell {...props}>
              <a onClick={this._onSortChange}>
                  {children} {sortDir ? (sortDir === SortTypes.DESC ? '↓' : '↑') : ''}
            </a>
        </Cell>
    );
}
_onSortChange(e) {
    e.preventDefault();
    if (this.props.onSortChange) {
        this.props.onSortChange(
            this.props.columnKey,
            this.props.sortDir ?
                reverseSortDirection(this.props.sortDir) :
                SortTypes.DESC
        );
    }
 }
}

您还需要创建排序类型：

 const SortTypes = {
      ASC: 'ASC',
      DESC: 'DESC',
 };

还有一种快速反转排序类型的方法：

  function reverseSortDirection(sortDir) {
      return sortDir === SortTypes.DESC ? SortTypes.ASC : SortTypes.DESC;
  }

有一点需要注意——我们在标题中有一个_onSortChange 方法，用于显示箭头并调用实际对数据进行排序的方法，但该方法将在实际的表格组件中。

在你的桌子上，你需要一些东西。

在您的情况下，您的表数据是硬编码的，但最佳做法是通过道具传递它。假设您通过属性获取数据，您需要相应地设置状态并设置默认排序索引（基本上是数据最初的排序方式）。

componentWillReceiveProps(props) {
    this._defaultSortIndexes = [];
    var size = props.myDataArray.length;
    for (var index = 0; index < size; index++) {
        this._defaultSortIndexes.push(index);
    }
    this.setState({ myTableData: props.myDataArray, sortedFilteredDataList: new DataListWrapper(this._defaultSortIndexes, props.myDataArray) }) 
}

所以，现在您的标题知道如何显示箭头以及如何调用表格本身的_onSortChange 方法。你的 table 组件也知道如何通过 props 接收数据数组，并将其放入 DataWrapper，并将其添加到 state。所以我们必须在表中创建 _onSortChange 方法，它实际上会将数据包装器中的 sortIndexes 设置为正确的顺序：

_onSortChange(columnKey, sortDir) {
    var sortIndexes = this._defaultSortIndexes.slice();
    sortIndexes.sort((indexA, indexB) => {
        var valueA = this.state.myTableData[indexA][columnKey];
        var valueB = this.state.myTableData[indexB][columnKey];
        var sortVal = 0;
        if (valueA > valueB) {
            sortVal = 1;
        }
        if (valueA < valueB) {
            sortVal = -1;
        }
        if (sortVal !== 0 && sortDir === SortTypes.ASC) {
            sortVal = sortVal * -1;
        }
        return sortVal;

    });

    this.setState({
        sortedFilteredDataList: new DataListWrapper(sortIndexes, this.state.myTableData),
        colSortDirs: {
            [columnKey]: sortDir,
        },
    });
}

所以现在，您可以像这样设置列：

     <Column
            columnKey='country'
            header={
                <SortHeaderCell
                    onSortChange={this._onSortChange}
                    sortDir={colSortDirs.country}>
                    Country
                </SortHeaderCell>}
                cell={
                    <MyTextCell
                        data={this.state.sortedFilteredDataList}
                        field="country"
                     />
                }
                width={150}
       />

排序就差不多了。文档演示了一种类似的过滤方式，使用带有过滤器索引的 DataListWrapper。我没有这样做，只是在我的表格组件嵌套的组件中过滤了我的数据数组。本质上，我有一个组件负责通过 props 将数据传递给 table 组件，并在那里进行过滤。我是这样做的：

在父组件中，我有一个过滤/搜索方法：

filterSearch(searchTerm) {
    
    this.setState({
        filteredData: this.state.myData.filter(function (el) {
            return (el.propertyToFilter.includes(searchTerm) || !searchTerm);
        })
    });
}

然后我渲染我的搜索组件和我的表格组件：

        <div>
            <div>
                <SearchBox onSearchTermChange={this.filterSearch} />
            </div>

            <br />
            <div className="row">
                <div>
                    <ResultsTable myDataArray={this.state.filteredData} />
                </div>
            </div>
        </div>

我的搜索框组件是这样的：

class SearchBox extends Component{
constructor(props) {
    super(props);

    
    this.state= {term: ''};
}

render() {
    return (
    <div>
     <input 
     value={this.state.term}
     onChange={(e)=>this.onInputChange(e.target.value)}></input>
   
    </div>
    )
}

onInputChange(term){
    this.setState({term});
    this.props.onSearchTermChange(term);
}
}
export default SearchBox;

差不多就是这样。您还应该注意，现在不支持fixed-data-table，您应该使用fixed-data-table-2。也就是说，我在固定数据表中完成了上述所有操作，它应该可以工作。

文档方面，官方文档为here

这些链接虽然是旧示例，但有一些错误。新的例子是here