javascript - react 选择 createFromSearch 显示附加叠加层

Question

我正在使用react-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
   },

除了这个小的 UI 问题之外，一切正常。单击后不久它就会显示重复的选项。

当我单击屏幕中的任意位置时，它会删除重复的停留并正确显示。谁能建议这是样式问题还是我需要做的任何其他事情？

Answer 1

我可以通过尝试多种方法来解决此问题。我重写了组件的 onValueChange 方法，并仅将值传递给实际的 onValueChange 方法，如下所示；

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

这会导致上述样式问题，因为组件无法找到 item.newOption 属性。因此，解决方案是在为选项列表添加新创建的项目时，将其添加为 item.newOption = 'true' 并将整个项目对象传递给 onValueChange 方法。