Сортировка определенного столбца

У меня есть массив items[], который имеет четыре поля name, origin, destination, seats. Я хотел бы отсортировать имя в алфавитном порядке по щелчку заголовка таблицы, то есть Name

вот мой фрагмент кода

JS-файл с переменными объявления массива и передачей значений в form.js

Stuff.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;

Table.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;

Есть ли способ, которым, когда я нажимаю заголовок имени в своей таблице, он сортируется по имени?

Спасибо

Поделитесь своим подходом к тому, чтобы это произошло.

— 29.05.2018 09:33

Я думал о - compare (a, b) {// Используйте toUpperCase (), чтобы игнорировать регистр символов const nameA = a.name.toUpperCase (); const nameB = b.name.toUpperCase (); пусть сравнение = 0; если (имяA> имяB) {сравнение = 1; } иначе, если (nameA <nameB) {сравнение = -1; } вернуть сравнение; } items.sort (сравнить); но проблема в том, что имя является частью массива элементов, и я не могу понять, как использовать эту конкретную часть из массива элементов

— 29.05.2018 09:36

javascript reactjs

29.05.2018 09:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

182

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не буду вдаваться в подробности ReactJS, вам нужно реализовать себя. Идея довольно проста:

Вы создаете обработчик событий для заголовка, например (onClick) = "sortByName ()"
Определите свою функцию sortByName, передав в нее данные, и отсортируйте их вручную, для этого вы можете использовать Array.sort ().
Обновление состояния заставит React повторно отобразить часть с обновлением

29.05.2018 09:41

Ответ принят как подходящий

Надеюсь, это ответит на ваш вопрос:

const items = [
    {
    name: 'C',
    quantity: 2
  },
  {
    name: 'B',
    quantity: 3
  },
  {
    name: 'A',
    quantity: 8
  }
];

console.info(items);

items.sort((a,b) => {
    const name1 = a.name.toLowerCase(), name2 = b.name.toLowerCase();
    return name1 === name2 ? 0 : name1 < name2 ? -1 : 1;
});

console.info(items);

https://jsfiddle.net/abhikr713/r6L2npfL/1/

29.05.2018 09:58