antd 的 Select 在使用 onSearch 获取远端数据时,只能显示 value 值

const { searchData, searching, searchValue } = this.state;
<Select
  mode="combobox"
  value={searchValue}
  placeholder="请输入搜索条件"
  notFoundContent={searching ? <Spin size="small" /> : null}
  filterOption={false}
  onChange={this.onSearchValueChangeHandler}
  onSearch={this.onSearchHandler}
>
    {searchData.map(d => <Option key={d.value}>{d.label}</Option>)}
</Select>

onSearchHandler(value) {
    this.setState({ searchData: [], searching: true });
    setTimeout(() => {
        const results = [
          { value: 'aaa', label: '啊啊啊' },
          { value: 'bbb', label: '不不不' },
          { value: 'ccc', label: '擦擦擦' },
        ];
        const data = results.map(item => ({ value: item.value, label: item.label }));
        this.setState({ searchData: data, searching: false });
    }, 500);
}

onSearchValueChangeHandler(value) {
    this.setState({
      searchValue: value,
      searchData: [],
      searching: false,
    });
}

上面是利用 Select 的 onSearch 接口进行远程数据访问的片段。现在可能发现一个 bug,当 mode='combobox' 时,下拉选择只会展示 value 值,但是当 mode='multiple',就能正常显示 label 值

clipboard.png

期望显示的结果应该是 '不不不'

clipboard.png

阅读 4.4k
评论
    4 个回答
    • 2.7k

    其实讲道理的是,那个option 是你自己设计的<Option key={d.value} value={d.value}>{d.label}</Option> 这样选出了的就是value值,而<Option key={d.value} value={d.label}>{d.label}</Option>,这样选出了的就是label值,所以显示设定value属性很重要

      相似问题
      推荐文章