javascript - react -选择createFromSearch，显示其他覆盖

我正在使用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问题之外，其他所有功能都正常运行。单击后不久，它会显示重复的选项。



当我单击屏幕上的任意位置时，它将删除此重复的停留并正确显示。有人可以建议是样式问题还是我需要做的其他事情？

最佳答案

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

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

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