реагирующий выбор элемента поиска с вводом после выбора - PullRequest
Новая
       11

реагирующий выбор элемента поиска с вводом после выбора

0 голосов
/ 13 февраля 2019

так что у меня возникли проблемы с работой с реагировать на выбор.Моя цель - создать элемент select с возможностью поиска, но когда опция выбрана, мне нужно добавить еще несколько букв / цифр.Например, я выбираю опцию с меткой «+372», затем мне нужно добавить к ней больше чисел и использовать это в качестве окончательного значения.Мне было интересно, если это вообще возможно с реакцией-выбора.

Вот часть кода https://pwl4jj0qoq.codesandbox.io/

1 Ответ

0 голосов
/ 13 февраля 2019

Если вы заранее знаете, какое окончательное значение должно быть отображено, я рекомендую вам использовать какую-то технику, как объяснено здесь .

В итоге вы можете изменить свои параметры для чего-то вроде этого: 

const options = [
  {
    label:
      "+372",
    // you can name this new prop has you want
    chipLabel: "+372000",
    value: "37200"
  },
  {
    label:
      "+373",
    chipLabel: "+37300",
    value: "37300"
  },
  {
    label:
      "+374,
    chipLabel: "+37400",
    value: "37400"
  }
];

и затем переопределите компонент, который отображает выбранную опцию: 

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

Живой пример здесь .

...