Блог

Я новичок в реагировании, и мне нужна помощь в создании функции сортировки по щелчкам для столбцов таблицы. Я бы хотел, чтобы столбцы сортировались, когда пользователь нажимает заголовки «Полное имя» и «Зарплата». Столбец «Дата присоединения» был отсортирован. Я не уверен, как сортировать другие столбцы. Ниже приведен код Employees.js файл, в котором должны быть функции сортировки и App.js файл столбца, который был отсортирован. Вот как это выглядит в браузере:

App.js

 import React, { Component } from 'react';
import Navbar from './components/layout/Navbar';
import Employees from './components/employees/Employees';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
 
class App extends Component {
  state = {
    employees:[]
}
 
  componentDidMount() {
    fetch('data.json', {
      headers: { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
     }})
    .then(response => response.json())
    .then(data => {
      const sortDate = data.sort((a, b) => new Date(b.dateJoined) - new Date(a.dateJoined))
      this.setState({employees:sortDate})
    })
    .catch(error => console.log(error))
  }
 
  render() {
    return (
      <div className='App'>
        <Navbar employees={this.state.employees} />
        <Employees employees={this.state.employees} />
      </div>
    );
  }
}
 
export default App;
 

Employees.js

 import React, { Component } from 'react';
import EmployeeItem from './EmployeeItem';
 
export class Employees extends Component {
    render() {
        return (
            <div className='container' id='table'>
            <div className='row'>
                <table className="table table-bordered">
                    <thead>
                        <tr>
                            <th>Full Name</th>
                            <th>Date Joined</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    {this.props.employees.map(employee => (
                        <EmployeeItem employee={employee} key={employee.id} />
                    ))}
                </table>
            </div>
            </div>
        )
    }
}
 
export default Employees
 

Вы должны реализовать сортировку точно так же, как вы сделали это для dateJoined поля. Просто создайте отдельную функцию для сортировки на основе поля и передайте ее в качестве опоры Employees компоненту.

Примечание: Поскольку ваша employees переменная состояния управляется в компоненте приложения, именно поэтому вы должны реализовать функцию сортировки в компоненте приложения.

В App.js , внутри вашего App компонента, создайте функцию для сортировки состояния сотрудника. Код должен выглядеть примерно так:

 ...
sortEmployees = (field) => {
    let sortedEmployees = [...this.state.employees];
    
    if(field === "fullName") {
        // sorting in reverse order. you can change this based on your preference
        sortedEmployees.sort((a, b) => b.fullName > a.fullName ? 1 : (a.fullName > b.fullName ? -1 : 0));
    } else if(field === "salary") {
        // sorting in reverse order. you can change this based on your preference
        sortedEmployees.sort((a, b) => b.salary - a.salary);
    } else {
        // keeping the default sort to dateJoined. you can modify this according to your business logic
        sortedEmployees.sort((a, b) => new Date(b.dateJoined) - new Date(a.dateJoined));
    }
    
    this.setState({ employees: sortedEmployees });
}
...
 

Добавьте render часть компонента приложения, передайте это сотрудникам следующим образом:

     ...
    <Employees employees={this.state.employees} sortEmployees={this.sortEmployees} />
    ...
 

В Employees компоненте вам нужна эта сортировка по щелчку заголовков. Итак, добавьте обработчик onClick even для каждого <th> элемента и вызовите sortEmployees функцию оттуда. Это должно выглядеть так:

 ...
<th onClick={() => this.props.sortEmployees("fullName")}>Full Name</th>
<th onClick={() => this.props.sortEmployees("dateJoined")}>Date Joined</th>
<th onClick={() => this.props.sortEmployees("salary")}>Salary</th>
...
 

Примечание: Я пропустил ненужные детали из своего решения.