Добавление меток для функционального реагирования на разрывы - PullRequest
Новая
       24

Добавление меток для функционального реагирования на разрывы

0 голосов
/ 07 ноября 2018

Я создал избыточную форму , которая использовала act-select . Мой компонент поля ввода позволяет мне выбрать опцию выбора ИЛИ создать новую опцию, набрав в поле ввода / выбора. Пример этой рабочей скважины коды andbox - https://codesandbox.io/s/o49kjl09j9

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

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

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

Это код, который рекомендуют реактивно-отборные документы без успеха: 

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

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

1 Ответ

0 голосов
/ 07 ноября 2018

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

Решением было написать собственный isValidNewOption для замены встроенного и передать его в качестве свойства для выбираемого объекта, поскольку использование параметров из 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}
...