Reactjs 创建单击排序功能

我是个新手，需要一些帮助为表列创建单击排序功能。我希望在用户单击“全名”和“薪资”标题时对列进行排序。“加入日期”列已排序。我不知道如何对其他列进行排序。下面是排序函数所在的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;

import React，{Component}来自'React'；
从“./components/layout/Navbar”导入导航栏；
从“./components/Employees/Employees”导入员工；
导入“/App.css”；
导入'bootstrap/dist/css/bootstrap.min.css'；
类应用程序扩展组件{
状态={
员工：[]
}
componentDidMount（）{
fetch（'data.json'{
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}})
.then（response=>response.json（））
。然后（数据=>{
const sortDate=data.sort（（a，b）=>新日期（b.dateJoined）-新日期（a.dateJoined））
this.setState（{employees:sortDate}）
})
.catch（错误=>console.log（错误））
}
render（）{
返回(
);
}
}
导出默认应用程序；

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

import React，{Component}来自'React'；
从“/EmployeeItem”导入EmployeeItem；
导出类扩展组件{
render（）{
返回(
全名
加入日期
薪水
{this.props.employees.map（employee=>(
))}
)
}
}
导出默认员工

您应该以与对

datejoin

字段执行排序完全相同的方式执行排序。只需创建一个单独的函数，根据字段进行排序，并将其作为道具传递给

Employees

组件

注意：由于您的

employees

状态变量是在应用程序组件中管理的，因此您应该在应用程序组件中实现排序功能

在

App.js

中的

App

组件中，创建一个函数来对员工状态进行排序。代码应该类似于：

。。。
sortEmployees=（字段）=>{
让sortedEmployees=[…this.state.employees]；
如果（字段==“全名”）{
//按相反顺序排序。您可以根据自己的喜好更改此顺序
排序（（a，b）=>b.fullName>a.fullName？1:（a.fullName>b.fullName？-1:0））；
}否则如果（字段==“工资”）{
//按相反顺序排序。您可以根据自己的喜好更改此顺序
sortedEmployees.sort（（a，b）=>b.salary-a.salary）；
}否则{
//将默认排序保留为dateJoined。您可以根据业务逻辑对此进行修改
sortedEmployees.sort（（a，b）=>新日期（b.dateJoined）-新日期（a.dateJoined））；
}
this.setState（{employees:sortedEmployees}）；
}
...

添加应用程序组件的

渲染部分，将其传递给员工，如下所示：

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

注意：我已经跳过了解决方案中不必要的细节。
非常感谢Shubhaw..你是救命恩人！我很高兴这有帮助。请将其标记为已接受的答案，以便对其他人也有帮助：）