时间戳

首页 > 解决方案 > 在反应选择中排序

reactjs - 在反应选择中排序

问题描述

我想知道是否可以让所有选定的选项出现在列表的顶部，然后按字母顺序对所有选定的选项进行排序？或者至少只是让它们出现在顶部。先感谢您。

标签： reactjsreact-select

解决方案

为了实现您的目标，您可以使用onChangeprops 来重新排列您存储的选项，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}来防止隐藏选定的选项。

这里有一个活生生的例子。

推荐阅读