Reagieren mit Sortieren und Filtern

Question

Ich bin noch neu in React. Ich bekomme einige Daten aus einer JSON-Datei. Ich habe es geschafft, dass die Suche funktioniert. Aber ich möchte auch in der Lage sein, auf meine Namenstabelle zu klicken und meine Daten nach Namen zu filtern. Wie mache ich das mit Filter arbeiten?

import React, { PropTypes } from 'react'; 

// Mock Data 
let MockData = require('./generated.json'); 
let searchValue = ''; 

export default class Employees extends React.PureComponent { 

    constructor(props) { 
    super(props); 
    this.state = { 
     searchValue: '', 
     sortValue: null 
    }; 

    this.searchInputChange = this.searchInputChange.bind(this); 
    this.searchSubmit = this.searchSubmit.bind(this); 
    } 

    // Sort function 
    sortFunction(sortValue, event) { 
    alert(sortValue); 
    this.setState({sortValue: sortValue}); 
    } 

    // Update search value state function 
    searchInputChange(event) { 
    this.searchValue = event.target.value; 
    } 

    // Search function 
    searchSubmit(event) { 
    this.setState({searchValue: this.searchValue}); 
    } 



    render() { 

    let sortedEmployeesBySearch = MockData.filter(
     (employee) => { 
     // If state searchValue is not null 
     if (this.state.searchValue) { 
      return employee.name.indexOf(this.state.searchValue) !== -1 || employee.gender.indexOf(this.state.searchValue) !== -1 || employee.company.indexOf(this.state.searchValue) !== -1 || employee.email.indexOf(this.state.searchValue) !== -1; 
     } 
     else { 
      return employee; 
     } 
     } 
    ); 

    return (
     <div className="container"> 
      <input className="search" type="text" name="search" placeholder="Search table" onChange={this.searchInputChange} /> 
      <input className="searchButton" type="button" value="Search" onClick={this.searchSubmit} /> 
     <table className="employeesList"> 
      <thead> 
      <tr> 
       <th onClick={this.sortFunction.bind(this,'name')}>Name</th> 
       <th onClick={this.sortFunction.bind(this,'gender')}>Gender</th> 
       <th onClick={this.sortFunction.bind(this,'company')}>Company</th> 
       <th onClick={this.sortFunction.bind(this,'email')}>E-mail</th> 
      </tr> 
      </thead> 
      <tbody> 
      { sortedEmployeesBySearch.map((employee) => (
      <tr key={employee.id}> 
       <td>{employee.name}</td> 
       <td>{employee.gender}</td> 
       <td>{employee.company}</td> 
       <td>{employee.email}</td> 
      </tr> 
      ))} 
      </tbody> 
     </table> 
     </div> 
    ); 

    } 

} 

Answer 1

Sie können die Daten sortieren nach: 1) die Unterkunft im Zustand Speichern auf sortieren, die Sie tun bereits 2) Chaining eine Sortierfunktion nach dem Filter Ihres MockData

Die zweite Aufgabe kann erreicht werden durch:

MockData.filter(...).sort((a, b) => { 
    aVal = a[this.state.sortValue]; 
    bVal = b[this.state.sortValue]; 
    switch(typeof aVal) { 
     case 'string': 
     return aVal.localeCompare(bVal); 
     case 'number': 
     return aVal - bVal; 
     default: 
     throw new Error("Unsupported value to sort by"); 
    } 
}); 

Sie auch eine benutzerdefinierte Funktion in die Sortiermethode passieren kann, dass die beiden Werte und tut benutzerdefinierte Sortierlogik auf dem sortValue Eigenschaft basiert erfolgt.