Antd's Select can only display value values when using onSearch to obtain remote data

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,
    });
}

above is a snippet of remote data access using Select"s onSearch interface. Now you may find a bug, when mode="combobox", the drop-down selection will only show the value value, but when the mode="multiple", will display the label value normally

clipboard.png

""

clipboard.png

Mar.06,2021

what makes sense is that the option is designed by yourself < Option key= {d.value} value= {d.value} > {d.label} < / Option > so the value is selected, and the < Option key= {d.value} value= {d.label} > {d.label} < / Option > is selected, so it is important to set the value attribute


when mode='combobox' . option what is the rendering? The value of label is not rendered freely


@ winglet
what is rendered is normal searchData.map (d = > < Option key= {d.value} > {d.label} < / Option >)
but when you drop down and select, all you get are value values, and there is no label value


I also encounter this problem.

  • Antd select drop-down option offset problem

    as shown in the figure, in the process of using select, there is a situation where the offset of the matching drop-down option cannot be close to the input box, and the reason has not been found. Orz, has a little impact on the experience . ...

    Mar.24,2021
  • Enzyme testing select problems with antd

    Hello, bosses. I encountered a problem when I was doing the jest test select the drop-down content of antd s select is displayed in dom and requires a mouse click. I used enzyme s mount method, and then simulated clicks through simulate ( change )...

    Jul.13,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bea912-319f6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bea912-319f6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?