在 reactJS 中使用不同的键而不是 react-select 中的值或标签进行搜索

Question

我在我的 React 应用程序中使用 react-select 作为可搜索的下拉列表。我指的是这个 link https://github.com/JedWatson/react-select.

在下拉选项结构中，需要options中相应对象中的label和value键。我的问题是，我的 options 数据中没有任何 label 或 value。我有完全不同的钥匙。我希望通过不同的键 tab.

搜索下拉列表

我的 React 版本：15.6.2
react-select 版本：1.0.0-rc.10

我的下拉代码：

<Select
   name="selectSubTag"
   id="selectSubTag"
   value={this.state.selectedFilter.subTag}
   options={this.state.jobSubTags}
   onChange={this.setSubTag}
   placeholder="Select Sub Tag"/>

我的 options 数据如下所示：

    this.state.jobSubTags = [
{tab:"tabName 1",tabValue:1},
{tab:"tabName 2",tabValue:2},
{tab:"tabName 3",tabValue:3},
]

现在我希望通过下拉列表中的 'tab' 键搜索数据。

Answer 1

默认情况下，react-select 搜索 value 和 label，但如果您添加了额外的键，它也会将它们包含在搜索中，因此只需遍历数组并追加value label 键等于 tab 键或 tabValue 键，它将搜索所有这些键，但请记住，为了显示，react-select 显示label 重点内容

Answer 2

你试过 filterProp="tab" 和 matchProp="label" 了吗？

Answer 3

您可以使用 getOptionLabel 和 getOptionValue :

 <Select
   name="selectSubTag"
   id="selectSubTag"
   value={this.state.selectedFilter.subTag}
   options={this.state.jobSubTags}
   getOptionLabel ={(option)=>option.tab}
   getOptionValue ={(option)=>option.tabValue}
   onChange={this.setSubTag}
   placeholder="Select Sub Tag"/>

在 reactJS 中使用不同的键而不是 react-select 中的值或标签进行搜索

Use different key for searching instead of value or label in react-select in reactJS

searchable

reactjs

react-select

dropdown