ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug

前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码:

　　　　　　　　<ComboBox 
                    // className={comboxClassName}
                    items={storeArray}
                    itemToString={item => (item ? item.text : '')}
                    onInputChange={this.handleEnterpriseSearch}
                    onChange={this.changeStore}
                    initialSelectedItem={storeArray.find(o => o.value === deviceStore.storeId)}
                    selectedItem={storeArray.find(o => o.value === deviceStore.storeId)}
                  />

items:加载此下拉框时使用什么集合,下面的查询这个集合的方法:

const res = await api.get(`/device/storeList`);
      res.data.forEach((o) => {
          let deviceItem = {
            "value": o.uid,
            "name": o.name,
            "text": o.name,    
          };
          storeArray.push(deviceItem);
          deviceStore.storeArray =  storeArray;
          storeArrayAll = storeArray;
      });

value是选项的值,text是显示的文字,name是我定义了用来干别的事的,可以忽略,

itemToString:如何显示内容, {item => (item ? item.text : '' )}item代表集合中的一项,有点像是java的lambda写法,如果item不是null就使用item的text属性,否则为""

onInputChange:搜索框改变时触发的函数,附代码:

handleEnterpriseSearch = async (v) => {

    if (!v) {
      storeArray = storeArrayAll;
      return;
    }
    const val = v;
    console.log(val);
    let arr = [];
    for (let index = 0; index < storeArrayAll.length; index++) {
      const element = storeArrayAll[index];
      if(element.text.indexOf(val) >= 0){
        arr.push(element);
      }
    }
    storeArray = arr;

  }

从所有的集合元素里比较谁匹配此搜索词,然后操作集合对象

onChange:选项改变时触发的函数,这里就不贴代码了,其实就是把选择的这一条数据传给调用的方法,然后我们保存到一个变量上,更新时从变量取就行了.

initialSelectedItem:默认选择哪一项,

{storeArray.find(o => o.value === deviceStore.storeId)}

从集合对象中遍历,找出value等于某个变量的数据,

 

我遇到的一些问题:

1.默认选中的项第一次加载后,再次呼出这个页面就会变成最开始的哪一项,

问题根源,我加载这个弹窗(这个可搜索下拉框是在一个弹窗里的),是根据一个boolean变量加载的,但是这个变量的加载位置是在这个form上而不是弹窗上,我改成弹窗根据boolean变量加载就好了,每一次关闭再打开就会重新加载初始化,默认选中项也会重新选中

2.显示的位置不能存在内容一样的选项

选择框的显示内容也就是value的值不可以存在相同的情况,这个控件认为选项们应该是各不相同的,我一开始是在名字后面跟上id,大家也可以用别的方法解决,后来项目需求改了店铺名不可以重复我又去掉了

转载于:https://www.cnblogs.com/zizaiwuyou/p/9908160.html