antd Select 组件输入搜索防抖

最新推荐文章于 2023-12-26 14:18:35 发布

ljl6395

最新推荐文章于 2023-12-26 14:18:35 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/JIANLI0123/article/details/105391325

本文介绍了一个使用React和lodash实现的SKU搜索组件，通过防抖技术优化搜索请求频率，提高用户体验。组件支持单选搜索模式，自定义下拉内容显示，并在搜索时动态更新SKU列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// import 
import debounce from 'lodash/debounce';

// -------------------------------------------------------------------------------------------------

// constructor

constructor(props) {
  super(props);
  this.fetchSku = debounce(this.fetchSku, 1000);
}

// --------------------------------------------------------------------------------------------------

// action
fetchSku = val => {
  const { dispatch } = this.props;
  if (val.length === 0) {
    this.setState({
      skuList: [],
    });
  } else {
    dispatch({
      type: 'customSkus/searchCustomSku',
      payload: {
        keyword: val,
      },
      callback: res => {
        this.setState({
          skuList: res,
        });
      },
    });
  }
};
  
//-------------------------------------------------------------------------------------------------

// render
<Select
  showSearch  // 单选搜索模式
  // mode="multiple"  // 可多选
  allowClear
  filterOption={false}  // 是否根据输入项进行筛选
  showArrow={false}
  placeholder={
    <span>
      <Icon type="search" /> 请输入sku进行搜索
    </span>
  }
  notFoundContent={searching ? <Spin size="small" /> : null}  // 无下拉内容时显示
  onSearch={this.fetchSku}  // 触发搜索
  style={{ width: '100%', marginBottom: '15px' }}
  size="small"
>
  {skuList.map(sku => (  // 下面可以不用去看，代码为实际项目中拷贝
    <Option
      key={sku.id}
      value={sku.sku_code}
      onClick={() => this.addToSkuArr(sku)}
      style={{ width: '100%', borderBottom: '1px solid #eee' }}
    >
      <div style={{ display: 'flex', fontSize: '12px', width: '350px' }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {sku.sku_code}
        </span>
        <span style={{ margin: '0 10px', color: '#ccc' }}>|</span>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {sku.title}
        </span>
      </div>
    </Option>
  ))}
</Select>