Reactjs 反应选择中的排序

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

---

提前感谢您。

为了实现您的目标，您可以使用

onChange

道具对存储在

状态下的选项重新排序，如下所示：

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}
      />
    );
  }
}

功能比较（a、b）{
返回a.label>b.label-1:b.label>a.label-1:0；
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项：选项
};
}
onChange=newOptions=>{
//获取原始选项并删除选定选项
const stateOptions=options.filter(
option=>！newOptions.find（op=>op==option）
);
//对所选选项进行排序
const orderedNewOptions=newOptions.sort（比较）；
这是我的国家({
//将两个阵列连接起来
选项：orderedNewOptions.concat（stateOptions）
});
};
render（）{
返回(
);
}
}

您需要使用
hideSelectedOptions={false}
来防止所选选项被隐藏

这里有一个。
当你做出新的选择时，它是如何工作的？列表将在选择时重新排序，这对于用户来说是非常意外和不和谐的。如果您有一个选项可以使该选项从选择时的列表中消失，则可以使该选项显示在列表的顶部。哦，那么您希望选择下拉列表仍然关闭，但是，当它被重新打开时，所选项目位于顶部？如何在componentmount上执行此操作