Как отсортировать по алфавиту, используя выпадающее меню в React - PullRequest
Новая
       3

Как отсортировать по алфавиту, используя выпадающее меню в React

0 голосов
/ 07 апреля 2020

Я пытаюсь заставить выпадающее меню сортировать по алфавиту, когда нажимаю на одну из опций. У меня есть функция, которая изменяет значение в состоянии, а затем другая функция, которая содержит оператор switch, чтобы алфавитно, когда выбран правильный регистр. Я не уверен, куда поместить мою функцию, которая содержит оператор switch. На данный момент у меня есть updateSortByFilter, вызываемый в onChange. Любые советы будут великолепны. Спасибо. 

updateSortByFilter = (event: any) => {
    this.setState({
     sortDropdown: event.target.value
    });
  };

  sortDropdown = () => {
  this.props.projects.sort((a: any, b: any) => {
  let aVal = '';
  let bVal = '';

  switch (this.state.sortDropdown) {
    case 'name':
      aVal = a.name;
      bVal = b.name;
      break;
    case 'date':
      aVal = a.date;
      bVal = b.date;
      break;
    default:
      aVal = a.name;
      bVal = b.name;
      break;
  }

  //ascending sort
  if (aVal < bVal) {
    return -1;
  } if (aVal > bVal) {
    return 1;
  } return 0;
  })
 }

  render() {
   return (

        <Form.Group>
          <Form.Label>Sort By:</Form.Label>
          <select onChange={this.updateSortByFilter}>
            <option value="name">Name</option>
            <option value="date">Date</option>
          </select>
        </Form.Group>

1 Ответ

0 голосов
/ 07 апреля 2020

Вы можете сделать это с дополнительным параметром, т.е. 

const projects = [{
  name: "c",
  date: new Date("2020/01/02"),
}, {
  name: "b",
  date: new Date("2020/12/12"),
}, {
  name: "a",
  date: new Date("2020/06/06"),
}]

const sortIt = sortBy => (a, b) => {
  if (a[sortBy] > b[sortBy]) {
    return 1;
  } else if (a[sortBy] < b[sortBy]) {
    return -1;
  }
  return 0;
}

const sortedByDate = projects.sort(sortIt('date'));
const sortedByName = projects.sort(sortIt('name'));

console.log(sortedByDate);
console.log(sortedByName);

И таким образом вы открыты для вывода любого свойства в объекте первого уровня и фильтрации по его строковому значению.

Или в одну строку 

const sortIt = sortBy => (a, b) => a[sortBy] > b[sortBy] ? 1 : a[sortBy] < b[sortBy] ? -1 : 0;
...