在React Bootstrap表中按时间排序

import React from 'react';
import { Table } from 'react-bootstrap';

const tableData = [
  { id: 1, name: 'John', time: '2022-01-01 10:00:00' },
  { id: 2, name: 'Jane', time: '2022-01-02 09:30:00' },
  { id: 3, name: 'Bob', time: '2022-01-03 14:15:00' },
  // 其他数据...
];

class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sortBy: 'asc', // 默认升序排序
      sortedData: tableData, // 初始数据与表格数据源一致
    };
  }
  // 其他代码...
}

class MyTable extends React.Component {
  // 其他代码...
  
  sortByTime = () => {
    const { sortBy, sortedData } = this.state;
    const sorted = [...sortedData].sort((a, b) => {
      if (sortBy === 'asc') {
        return new Date(a.time) - new Date(b.time);
      } else {
        return new Date(b.time) - new Date(a.time);
      }
    });
    this.setState({ sortedData: sorted, sortBy: sortBy === 'asc' ? 'desc' : 'asc' });
  }

  componentDidMount() {
    this.sortByTime(); // 初始按时间排序
  }
  
  // 其他代码...
}

class MyTable extends React.Component {
  // 其他代码...
  
  render() {
    const { sortedData } = this.state;
    return (
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th onClick={this.sortByTime}>Time</th> {/* 点击表头进行排序 */}
          </tr>
        </thead>
        <tbody>
          {sortedData.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.time}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}