response-selectize createFromSearch, показывающий дополнительный оверлей

Question

Я использую компонент response-selectize для настраиваемого раскрывающегося списка, который позволяет пользователям добавлять новые параметры.

  <Dropdown 
      options={myOptions} 
      value={selectedValue} 
      onValueChange={value => { 
        this.valueUpdated(emptyStringToNull(value)); 
      }} 
      createFromSearch={this.createFromSearch} 
     /> 

Мои функции createFromSearch и onValueChange следующие:

createFromSearch: function(options, search){   
    if (search.length === 0 || (options.map(function(option){ 
     return option.label; 
    })).indexOf(search) > -1) 
     return null; 
    else { 
     return {'label': search, 'value': search}; 
    } 
    }, 

    onValueChange: function(text) { 
    // update the value in state 
    }, 

Все работает отлично, кроме этого небольшого вопроса пользовательского интерфейса. Он показывает повторяющиеся параметры вскоре после нажатия.

Когда я щелкните в любом месте экрана, он удаляет этот дубликат и показывает посадку должным образом. Может ли кто-нибудь предложить это вопрос стиля или любую другую вещь, которую мне нужно сделать?

Answer 1

Я могу исправить эту проблему, попробовав несколько вещей. Я переопределял метод ValueChange компонента и передавал только значение фактическому методу onValueChange, как показано ниже;

const onValueChangeInDropdown = props => value => { 
     if (value) { 
     props.onValueChange(value.value); 
     } else { 
     props.onValueChange(null); 
     } 
}; 

Это вызывает вышеупомянутую проблему с дизайном, поскольку компонент не смог найти атрибут item.newOption. Поэтому решение заключается в том, что при добавлении вновь созданного элемента в список опций добавьте его как item.newOption = 'true' и передайте весь объект объекта методу onValueChange.