react-selectize createFromSearch顯示額外的覆蓋

我正在使用react-selectize組件來定製下拉菜單，它允許用戶添加新的選項。react-selectize createFromSearch顯示額外的覆蓋

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

除了這個小的用戶界面問題，一切正常。點擊後，它會很快顯示重複的選項。

當我在屏幕上任意位置單擊它消除這種重複的短暫停留，並顯示正常。任何人都可以請建議是造型問題還是我需要做的其他事情？

來源

2017-01-06 JagKum

最好是，如果你可以重複說這個問題，JsFiddle並在這裏提供一個鏈接。可能有很多原因會導致這種情況，其中之一就是UI呈現選項的方式以及所需的選項類型。 –

@Tantri，謝謝你的回覆。我能夠自己解決上述問題。我會把我的答案放在下面。 – JagKum

我可以通過嘗試幾件事來解決這個問題。我重寫了組件的ValueChange方法，並將值僅傳遞給實際的onValueChange方法，如下所示;

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

由於組件找不到item.newOption屬性，導致上述樣式問題。因此，解決方案是爲選項列表添加新創建的項目時，將其添加爲item.newOption ='true'，並將整個項目對象傳遞給onValueChange方法。

來源

2017-01-10 21:41:30 JagKum

react-selectize createFromSearch顯示額外的覆蓋

回答

相關問題