将所选选项显示为选择下拉列表中的第一个选项？答案

【问题标题】：Show the selected option as the first option in the select dropdown?将所选选项显示为选择下拉列表中的第一个选项？
【发布时间】：2021-10-23 09:52:58
【问题描述】：

我正在使用 react-select 在下拉列表中显示用户列表。我希望它始终将所选元素显示为列表中的第一个元素。有本地支持吗？

例子：

在下图中，由于选择了Green，我希望Green出现在Ocean之前的列表顶部

【问题讨论】：

添加您的代码以便我们识别您的实现
这里是我添加此屏幕截图的代码的链接。但是，我觉得它不应该与我的实现相关，因为我正在寻找原生支持。

标签： reactjs react-select react-select-search

【解决方案1】：

试试这个代码：

  const [options, setOptions] = useState([
    { label: "Blue", value: "Blue" },
    { label: "Red", value: "Red" },
    { label: "Yellow", value: "Yellow" },
    { label: "Green", value: "Green" },
    { label: "Pink", value: "Pink" },
    { label: "White", value: "White" },
    { label: "Brown", value: "Brown" }
  ]);
  const [value, setValue] = useState("Select");
  function handler(e) {
    setValue(e);
    let newOptions = [];
    newOptions.push({ label: e, value: e });
    for (let i in options) {
      if (options[i].value !== e) {
        newOptions.push(options[i]);
      }
    }
    setOptions(newOptions);
  }
  return (
    <div className="App">
      <Select
        name="colors"
        defaultValue={value}
        options={options}
        onChange={(e) => handler(e.value)}
      />
    </div>
  );

点击此链接查看demo

【讨论】：

我试图避免自己进行这种排序。我正在检查是否有内置支持。无论如何感谢您的回答:)

【解决方案2】：

您可以将初始化回调传递给useState 以首次对options 数组进行排序并将defaultValue 放在顶部：

function sortOptions(options, selectedValue) {
  return options.sort((a, b) => {
    if (a === selectedValue) return -1;
    if (b === selectedValue) return 1;
    return 0;
  });
}

const defaultValue = colourOptions[5];
const [options, setOptions] = React.useState(() =>
  sortOptions(optionsProp, defaultValue)
);

return (
  <Select
    defaultValue={defaultValue}
    onChange={(value) => setOptions(sortOptions(optionsProp, value))}
    name="colors"
    options={options}
  />
);

【讨论】：

实际上，我希望这种行为不仅适用于默认值，还适用于用户选择其他选项时。此外，我可以找到一种手动操作的方法，我只是想知道 react-select 是否内置了对它的支持。
@ArjunMudhaliyar 我只是浏览了docs，看起来没有这样的选项。无论如何都要更新我的答案。
我很害怕。无论如何，感谢您添加此手动解决方案:)