IT技术 - 对特定列进行排序 - 吾爱随笔录

我有一个数组items[]，它有四个字段name, origin, destination, seats。我想按字母顺序对表格标题的名称进行排序，即Name

这是我的代码片段

带有数组声明变量并将值传递给 form.js 的 JS 文件

东西.js

import React, { Component } from 'react';
import './App.css';
import Tab from './Table';
import Form from './Form';

class Stuff extends Component {
  constructor() {
    super();

    this.state = {
      name: '',
      origin: '',
        destination: '',
          seats: '',
      items: []
    }
  };

  handleFormSubmit = (e) => {
    e.preventDefault();

    let items = [...this.state.items];

    items.push({
      name: this.state.name,
      origin: this.state.origin,
      destination: this.state.destination,
      seats: this.state.seats
    });

    this.setState({
      items,
      name: '',
      origin: '',
      destination: '',
      seats: ''
    });
  };

  handleInputChange = (e) => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    })
  };

  render() {
    return (
      <div className="App">

        <Form handleFormSubmit={ this.handleFormSubmit }
          handleInputChange={ this.handleInputChange }
          newName={ this.state.name }
          newOrigin={ this.state.origin }
          newDestination={ this.state.destination }
          newSeats={ this.state.seats } />
<Tab items={ this.state.items }/>

      </div>
    );
  }
}

export default Stuff;

表.js

import React, { Component } from 'react';
import { Table } from 'reactstrap';

class Tab extends React.Component {

  render() {
    const items = this.props.items;



  return (

      <Table striped>
             <thead>
               <tr>

                 <th  >Name</th>
                 <th>Origin</th>
                 <th>Destination</th>
                 <th>Seats</th>

               </tr>
             </thead>
             <tbody>
             {items.map(item => {
  return (

               <tr>

                 <td>{item.name}</td>
                 <td>{item.origin}</td>
                 <td>{item.destination}</td>
                 <td>{item.seats}</td>

               </tr>
             );
           })}

             </tbody>
           </Table>

    );
  }
}


export default Tab;

有没有什么方法可以让我点击表格中的名称标题时，它会根据名称进行排序？

谢谢你