ANTD Select组件实现可选择输入项 react

最新推荐文章于 2024-05-15 09:31:27 发布

鹊桥几回

最新推荐文章于 2024-05-15 09:31:27 发布

阅读量3.3k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_43399352/article/details/124317399

版权

效果：

当选择框使用关键字搜索，但是没有搜索到想要的项目时，可以回填不存在的项目。

实现逻辑：

监听输入框改变，动态替换下拉列表，如果未匹配到就将value push到下拉列表

关键部分代码：

··· 
 state = {
    filterResult:[],
    fltNoData:[]
  };

···

//当点击清空时，就重置下拉选择内容
  whenClearFltNo=(val)=>{
    if (!val){
      const {fltNoData} = this.state;
      this.setState({
        filterResult:fltNoData
      })
    }
  }

  //根据输入内容过滤,同时如果不存在就补充到可选项
  filterFlight = (value) => {
    const {fltNoData} = this.state;
    let filterResult = [];
    if (value && fltNoData.length > 0) {
      filterResult = fltNoData.filter(item => item.fltNo.indexOf(value) > -1);

      if (filterResult.length==0 && value && value.trim() !== '') {
        filterResult.push({fltNo: value});
      }

    } else {
      filterResult = fltNoData;
    }
    this.setState({
      filterResult
    })
  }
···

<Select
   placeholder="请选择"
   allowClear={true}
   showSearch
   onChange={this.whenClearFltNo}
   onSearch={this.filterFlight}>
   {this.state.filterResult.map(item => (
   <Select.Option key={item.fltNo}>{item.fltNo}</Select.Option> 
   ))} 
</Select>

···