Блог

Я использую react-select для отображения списка пользователей в раскрывающемся списке. Я хочу, чтобы он всегда показывал выбранный элемент в качестве первого элемента в списке. Есть ли встроенная поддержка для этого?

Пример:

На следующем изображении, поскольку Green выбрано, я хочу Green появиться в верхней части списка перед Ocean

Попробуйте этот код :

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

Нажмите на эту ссылку, чтобы просмотреть демонстрацию

Вы можете передать обратный вызов инициализации 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}
  />
);