Сортировка по реакции-выбора

Question

Я хотел бы знать, можно ли сделать так, чтобы все выбранные параметры отображались в верхней части списка, а затем сортировать все выбранные параметры в алфавитном порядке? Или, по крайней мере, просто заставить их появляться наверху. Заранее спасибо.

Answer 1

Для достижения своей цели вы можете использовать onChange реквизит, чтобы изменить порядок ваших опций, хранящихся в state, например:

function compare(a, b) {
  return a.label > b.label ? 1 : b.label > a.label ? -1 : 0;
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: options
    };
  }

  onChange = newOptions => {
    // take original options and remove selected options
    const stateOptions = options.filter(
      option => !newOptions.find(op => op === option)
    );
    // sort the selected options
    const orderedNewOptions = newOptions.sort(compare);
    this.setState({
      // concat the two arrays
      options: orderedNewOptions.concat(stateOptions)
    });
  };
  render() {
    return (
      <Select
        isMulti
        hideSelectedOptions={false}
        options={this.state.options}
        onChange={this.onChange}
      />
    );
  }
}

Вам нужно будет использовать hideSelectedOptions={false} для предотвращения скрытия выбранных опций.

Здесь живой пример .