使用不同的键进行搜索，而不是在 reactJS 中选择的值或标签

Question

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

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

• 我的反应版本：15.6.2
• 反应选择版本：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

您可以使用

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"/>

Answer 2

默认情况下，react-select搜索 value 和 label ，但如果您添加了其他键，它也将将它们包含在搜索中，因此只需迭代数组并附加等于tab键或tabValue键value label键，它将搜索所有键， 但请记住，对于显示，react-select显示label关键内容

Answer 3

您是否尝试过filterProp="tab"和matchProp="label"？