Как визуализировать количество выбранных предметов с реагировать на выбор v2

Question

Я использую act-select версии 2, и у меня возникают проблемы с изменением пользовательского поведения для множественного выбора.Я хотел бы показать количество выбранных предметов вместо списка выбранных предметов.Я имею в виду вместо этого:

Я хочу это:

Любая помощь будет по достоинству оценена!

спасибо ...

Answer 1

После того, как я продолжаю поиск, основываясь на ответе @ Laura, я получаю это решение, которое показывает количество выбранных элементов, а также поддерживает поведение по умолчанию ValueContainer, возможно, кто-то еще может найти его полезным:

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue } = props;
  const nbValues = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {
        `${nbValues} items selected`
      }
    </components.ValueContainer>
  );
};

Вот пример

Answer 2

Вы можете использовать пользовательский components, чтобы сделать что-то вроде этого:

ОБНОВЛЕНИЕ с поведением открытого меню @ lisdey89

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue } = props;
  const nbValues = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${nbValues} items selected`}
    </components.ValueContainer>
  );
};
const options = [
  { label: "label 1", value: 1 },
  { label: "label 2", value: 2 },
  { label: "label 3", value: 3 },
  { label: "label 4", value: 4 }
];
function App() {
  const components = { ValueContainer };
  return <Select isMulti components={components} options={options} />;
}

Здесь liveпример .