【React+Antd】Antd4 AutoComplete无法回填属性问题

问题描述

项目中 Antd 升级到 4.16 后发现 AutoComplete 无法正常回填属性名称了，只能回填 value 值，如下展示：

Antd官方做了属性变更不再支持 dataSource 及 label 为值的输入，不兼容会报错无法运行

AutoComplete兼容Antd4写法

由于AutoComplete 不再支持label 为值的输入，想实现类似AutoComplete 的效果可以使用 Select 实现。

renderData(item:any) {
  // Antd 4. x 兼容新API
  return { label: item.Name, value: item.Code };
  
  // Antd 3.x
  //  return (
  //  < AutoComplete.Option key = {item.createdTime} value = {item.Code} > {item.Name} </ AutoComplete.Option >
  // );
}

<AutoComplete
  // dataSource = {data.map(this.renderData)} // AntD 3. x
  options={data.map(this.renderData)} // Antd 4.x
  onSearch={this.onSearch}
  onChange={this.onChange}
  value={value}
  placeholder="请输入"
/>

Select实现AutoComplete效果

options配置

说明：

通过 options 属性配置选项内容，建议设置 optionFilterProp="label" 来对内容进行搜索

renderData(item:any) {
  return { label: item.Name, value: item.Code };
}

<Select
  showSearch
  showArrow={false}
  allowClear={true}
  placeholder="请输入"
  defaultValue={value}
  options={data.map(this.renderData)}
  onSearch={this.onSearch}
  onChange={this.onChange}
/>

该写法可能存在有内容无法展示的情况，如下所示

设置 optionFilterProp="label" 来对内容进行搜索

<Select
  showSearch
  showArrow={false}
  allowClear={true}
  placeholder="请输入"
  defaultValue={value}
  optionFilterProp="label" // 当出现有结果无法展示时，通过label对options进行过滤
  options={data.map(this.renderData)}
  onSearch={this.onSearch}
  onChange={this.onChange}
/>

Select+Option

说明：

1. 通过Select + Option 属性配置选项内容时，可以设置 optionLabelProp="label"  对内嵌内容进行搜索。

2. 当出现无法展示列表内容时，可以禁用或重新 filterOption

renderAutoCompleteChildren(dataSource=[]) {
  return dataSource.map((item: any) => <Select.Option key={item.createdTime} value={item.storeCode} label={item.storeName}>{item.storeName}</Select.Option>);
};

<Select
  showSearch
  showArrow={false}
  allowClear={true}
  placeholder="请输入"
  defaultValue={value}
  filterOption={false} //  **** 默认为 true ，在某些场景下无法展示筛选内容，可以设置为 false 或者自定义函数
  optionLabelProp="label" // 指定回填的属性
  onSearch={this.onSearch}
  onChange={this.onChange}
>
  { this.renderAutoCompleteChildren(data) }
</Select>

友情提示

见原文：【React+Antd】Antd4 AutoComplete无法回填属性问题)

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。