javascript – 过滤和排序React

我是开发新手React我有一个项目,我必须在我的表上添加过滤器和排序功能,我真的不知道从哪里开始.以下模板：
怎么办？

import * as React from 'react';
import { SPComponentLoader } from '@microsoft/sp-loader';

import styles from '../components/SearchSpfx.module.scss';
import { ISearchSpfxWebPartProps } from '../ISearchSpfxWebPartProps';

import * as moment from 'moment';

export interface ITableTemplate extends ISearchSpfxWebPartProps {
	results: any[];
}

export default class TableTemplate extends React.Component<ITableTemplate, {}> {
	private iconUrl: string = "https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/16/";
	private unknown: string[] = ['aspx', 'null'];

	private getAuthorDisplayName(author: string): string {
		if (author !== null) {
			const splits: string[] = author.split('|');
			return splits[1].trim();
		} else {
			return "";
		}
	}

	private getDateFromString(retrievedDate: string): string {
		if (retrievedDate !== null) {
			return moment(retrievedDate).format('DD/MM/YYYY');
		} else {
			return "";
		}
	}

	public render(): JSX.Element {
		// Load the Office UI Fabrics components css file via the module loader
    	SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');

		return (
			<div className={styles.searchSpfx}>
				{
					(() => {
						// Check if you need to show a title
						if (this.props.title !== "") {
							return <h1 className='ms-font-xxl'>{this.props.title}</h1>;
						}
					})()
				}

				<table className={`ms-Table ${styles.templateTable}`}>
					<thead>
						<tr>
							<th>Type</th>
							<th>Name</th>
							<th>Modified</th>
							<th>Modified by</th>
						</tr>
					</thead>
					<tbody>
						{
							this.props.results.map((result, index) => {
								return (<tr key={index}>
											<td>
												<a href={result.Path}><img src={`${this.iconUrl}${result.Fileextension !== null && this.unknown.indexOf(result.Fileextension) === -1 ? result.Fileextension : 'code'}.png`} alt="File extension"/></a>
											</td>
											<td>
												<a href={result.Path}>{result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""}</a>
											</td>
											<td>{this.getDateFromString(result.ModifiedOWSDATE)}</td>
											<td>{this.getAuthorDisplayName(result.EditorOWSUSER)}</td>
										</tr>);
							})
						}
					</tbody>
				</table>
			</div>
		);
	}
}

感谢你们

解决方法:

这里有一些工作代码,介绍如何实现可以过滤和排序的表.在这里,只要您单击行标题,就会进行排序.这个例子的this.props.data是：

[
    {"Type":"foo", "Name": 0, "Modified": "3/20/2017", "ModifiedBy":"Me"},
    {"Type":"foo", "Name": 2, "Modified": "3/15/2017", "ModifiedBy":"You"},
    {"Type":"buzz", "Name": 1, "Modified": "3/20/2017", "ModifiedBy":"Me"}
];

反应类是：

const SortableFilterableTable = React.createClass({
    getInitialState: function(){
        return({data:this.getSortedData('Type')});
    },
    render: function(){

        let rows = this.state.data.map((rowData) =>{
            return(
                <tr>
                    <td>{rowData.Type}</td>
                    <td>{rowData.Name}</td>
                    <td>{rowData.Modified}</td>
                    <td>{rowData.ModifiedBy}</td>
                </tr>
            );
        });
        return(
            <div>
                <input type="text" id="filter" onChange={this.filterTable}/>
                <table>
                    <thead>
                        <tr>
                            <th onClick={()=>this.setSortedData('Type')}>Type</th>
                            <th onClick={()=>this.setSortedData('Name')}>Name</th>
                            <th onClick={()=>this.setSortedData('Modified')}>Modified</th>
                            <th onClick={()=>this.setSortedData('Modified By')}>Modified By</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        );
    },
    setSortedData: function(sortBy){
        this.setState({data:this.getSortedData(sortBy)});
    },
    getSortedData: function(sortBy){
        //data handed down from props
        let dataToSort = this.props.data;

        //you can implement your own sorting algorithm here. I think this one
        //will only work if the properties are integers.
        dataToSort.sort(function(a,b){
            if(sortBy === 'Type')
                return a.Type - b.Type;
            if(sortBy === 'Name')
                return a.Name - b.Name;
            if(sortBy === 'Modified')
                return a.Modified - b.Modified;
            if(sortBy === 'Modified By')
                return a.ModifiedBy - b.ModifiedBy;
        });
        return dataToSort;
    },
    filterTable: function(e){
        let text = e.target.value;
        let filterFunc = (value) => {
            console.log(value)
            if(value.Type.indexOf(text) >= 0 || value.Name.toString().indexOf(text) >= 0 || value.Modified.indexOf(text) >= 0 || value.ModifiedBy.indexOf(text) >= 0)
                return true;
            console.log('made it ')
            return false;
        };

        let dataForState = this.props.data.filter(filterFunc);
        this.setState({data:dataForState});
    }
});

您必须使用自己的排序算法来处理字符串和日期.使用此代码,单击表标题时将唯一正确排序的列是“名称”列.

标签：javascript,reactjs,react-jsx
来源： https://codeday.me/bug/20190705/1391992.html