reagiert-selectize createFromSearch zusätzlichen Overlay zeigt

Question

Ich verwende reagieren-selectize Komponente für anpassbare Drop-Down, die Benutzer neue Optionen hinzufügen kann.

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

Meine createFromSearch und onValueChange Funktionen sind wie folgt;

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 
    }, 

Alles funktioniert anders als dieses kleine UI Problem. Es zeigt doppelte Optionen bald nachdem ich geklickt habe.

Wenn ich irgendwo auf dem Bildschirm klicken entfernt es diese doppelte layover und zeigt richtig. Kann jemand bitte vorschlagen, ist es Styling-Problem oder jede andere Sache, die ich tun muss?

Answer 1

ich in der Lage, indem Sie versuchen einige Dinge, um dieses Problem zu beheben. Ich habe überschreiben onValueChange Verfahren des Bauteils und bestanden nur den Wert der tatsächlichen onValueChange Methode wie unten;

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

Dies verursacht das oben genannte Styling-Problem, da die Komponente das Element item.newOption nicht finden konnte. So Lösung ist, wenn für die Optionsliste als item.newOption = ‚true‘ hinzufügen neu erstellte Element hinzufügen und das ganze Element Objekt onValueChange Methode übergeben.