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

Question

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

例子：

在下图中，由于Green被选中，我想出Green现在列表顶部之前Ocean

Answer 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>
  );

点击此链接查看演示

Answer 2

您可以将初始化回调传递给第一次useState对数组进行排序并将其放在顶部：optionsdefaultValue

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