react-selectize 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 =＆＃39; true＆＃39;并将整个item对象传递给onValueChange方法。