ソートとフィルターに反応する

Question

私はまだReactで新しいです。私はJSONファイルからいくつかのデータを取得します。私は検索がうまくいくように管理しました。しかし、私はまた、私の名前のテーブルのヘッダーをクリックし、名前でデータをフィルタすることができるようにしたい。どのようにフィルタを使ってその作業を行うのですか？

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

あなたがして、データを並べ替えることができます：あなたはすでにあなたのMockData

第二のフィルタの後にソート機能をチェーン） 2をやっている、上でソートする状態でプロパティを保存 1）あなたも、2つの値をとり、カスタムsortValueプロパティに基づいてロジックをソートするんsortメソッドにカスタム関数を渡すことができ

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"); 
    } 
}); 

：タスクをすることによって達成することができます。