Переключить функцию сортировки в React - PullRequest
Новая
       17

Переключить функцию сортировки в React

0 голосов
/ 28 апреля 2019

Я создал таблицу, которая отображает цены и функцию для их сортировки, но я не могу понять, как переключаться между возрастанием и снижением. 

...//my states
      this.compareBy.bind(this);
      this.sortBy.bind(this);
  };

  compareBy(key) {
    return function (a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    };
  }


  sortBy(key) {
    let arrayCopy = [...this.state.data];
    arrayCopy.sort(this.compareBy(key));
    this.setState({data: arrayCopy});
  }

 <th  onClick={() => this.sortBy('name')}>Name</th>

Вот функция моего кода.

1 Ответ

1 голос
/ 28 апреля 2019

Вы можете добавить переменную состояния, чтобы указать, должна ли сортировка выполняться по возрастанию или убыванию, и соответствующим образом обновить функцию compareBy.

Например, если вы называете переменную состояния sortAscending (boolean), вы можете обновить compareBy, чтобы он выглядел примерно так: 

compareBy(key) {
  const { sortAscending } = this.state;
  return function (a, b) {
    if (a[key] < b[key]) return sortAscending ? -1 : 1;
    if (a[key] > b[key]) return sortAscending ? 1 : -1;
    return 0;
  };
}

Затем добавьте кнопку где-нибудь для переключения sortAscending или обновите ее последовательными нажатиями кнопки сортировки по имени.

...