Reactjs 虚拟化选择：如何在特定标签上进行搜索

考虑到我有这样的选项的数据

目标代码：[{ 身份证号码：1002 代码：“897” 描述：“卡车” 代码描述：“897-卡车” }, { 身份证号码：1089 代码：“807” 说明：“公共汽车” 代码描述：“898-总线” }, { 身份证号码：8990 代码：“342” 描述：“汽车” 代码描述：“342-汽车” }]

我的虚拟化选择如下所示：

必修的 选项={this.props.masterData.ObjectCodes} 值={this.state.selectedObjectCode1} labelKey=“代码描述” 占位符=“选择对象代码1” onChange={selectedObjectCode1=> 这是我的国家({ 选择对象代码1， hasErrorSelectedObjectCode1:错误 }) } 可搜索={true} 简单值 valueKey=“Id” />

当我们搜索897时，它将显示所有3条记录，因为它将搜索整个数组（选项属性中提供的内容），在这里，我希望能够仅在lablekey（CodeDescription）上进行搜索。我们如何才能做到这一点

BR/Sandesh Kirani

试试这个- 现在，如果我输入“8”，它只显示两个选项。它只通过代码描述进行搜索。如果需要进一步的搜索自定义，可以启用

async

并使用

loadOptions

功能

import React, { Component } from "react";
import "react-select/dist/react-select.css";
import "react-virtualized-select/styles.css";
import VirtualizedSelect from "react-virtualized-select";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ObjectCodes: [
        {
          Id: 1002,
          Code: "897",
          Description: "truck",
          CodeDescription: "897 - truck"
        },
        {
          Id: 1089,
          Code: "807",
          Description: "bus",
          CodeDescription: "898 - bus"
        },
        {
          Id: 8990,
          Code: "342",
          Description: "car",
          CodeDescription: "342- car"
        }
      ],
      selectedObjectCode1: undefined
    };
  }
  render() {
    return (
      <div className="App">
        <VirtualizedSelect
          required
          labelKey="CodeDescription"
          options={this.state.ObjectCodes}
          value={this.state.selectedObjectCode1}
          placeholder="Select Object Code"
          onChange={selectedObjectCode1 =>
            this.setState({
              selectedObjectCode1
            })
          }
        />
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“react-select/dist/react-select.css”；
导入“react virtualized select/styles.css”；
从“反应虚拟化选择”导入虚拟化选择；
导入“/styles.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
目标代码：[
{
Id:1002，
代码：“897”，
描述：“卡车”，
代码描述：“897-卡车”
},
{
Id:1089，
代码：“807”，
描述：“巴士”，
代码描述：“898-总线”
},
{
Id:8990，
代码：“342”，
描述：“汽车”，
代码描述：“342-汽车”
}
],
selectedObjectCode1:未定义
};
}
render（）{
返回(
这是我的国家({
已选择对象代码1
})
}
/>
);
}
}
导出默认应用程序；

---

请注意，不再维护库。我不建议您继续使用它。

显示所选组件的react代码。事实上，最好能在codesandbox上创建一个示例。@这里是codesandbox链接：，这里搜索89，然后我们看到所有3个都被过滤，因为89与ID和代码匹配。在这里，我正在寻找一种只在CodeDescription上启用搜索的方法（即，labelkey属性中提到的，搜索应该只在这一点上进行），这不起作用，而且对于customoption渲染器，我们也没有可以用于指定搜索必须进行的操作的函数。