Функциональное добавление меток к разрывам реакции-выбора

Я создал redux-form, в которой использовалось response-select. Мой компонент поля ввода позволяет мне выбрать вариант выбора ИЛИ создать новый вариант, введя текст в поле ввода / выбора. Пример этой рабочей скважины codeandbox - https://codesandbox.io/s/o49kjl09j9

Следующая часть моего компонента - сгруппировать параметры по метке данных - вы увидите, как это работает, с помощью этого кода и окна - https://codesandbox.io/s/k5pyr75xor

Проблема в том, что после того, как я применил свои изменения для работы групп, я больше не могу вводить новый параметр в поле выбора / ввода. Не знаю, как исправить ошибку. Я изменил структуру данных, поступающих для создания групп, но не могу реализовать приведенный ниже код в мою песочницу - https://codesandbox.io/s/k5pyr75xor.

ОБНОВЛЕНИЕ: проблема в том, что у созданного значения нет метки, но я бы добавил метку по умолчанию к созданным параметрам. например "Обычай"

Это код, который безуспешно рекомендуют документы response-select:

const formatGroupLabel = data => (
  <div style={groupStyles}>
    <span>{data.label}</span>
    <span style={groupBadgeStyles}>{data.options.length}</span>
  </div>
);

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    formatGroupLabel={formatGroupLabel}
  />
);

Любая помощь будет оценена здесь.

ОБНОВЛЕНИЕ: знайте проблему здесь и решение - https://github.com/JedWatson/react-select/pull/2659

Мне нужна помощь в реализации решения.


reactjs javascript redux redux-form react-select
person Tom Rudge    schedule 07.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось разобраться в проблеме.

Решение заключалось в том, чтобы написать собственный isValidNewOption, чтобы заменить встроенный и передать его как свойство в созданный select, потому что использование параметров из http://jedwatson.github.io/react-select/" Числовые значения "не работают, потому что .toLowerCase () не работает с числами

Пример исправления: https://codesandbox.io/s/p72l42pz30

  isValidNewOption = (inputValue, selectValue, selectOptions) => {
    if (
      inputValue.trim().length === 0 ||
      selectOptions.find(option => option.name === inputValue)
    ) {
      return false;
    }
    return true;
  };

и добавив это к выбору:

isValidNewOption={this.isValidNewOption}
person Tom Rudge    schedule 07.11.2018