使用react-data-grid將ESR類組件調整爲React.createClass方法

Question

我正在使用react-data-grid庫在反應中創建可過濾的數據表。他們的所有示例都使用折舊的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。因此，添加可過濾性：對this._columns中的每個對象都是true。欲瞭解更多信息，請查詢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 
    } 
];