javascript - 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 = 'true' 并将整个项目对象传递给 onValueChange 方法。