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

Question

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

在下拉选项结构中，它需要label和value键入中的相应对象options。我的问题是，我没有任何label或value在我的options数据。我总共有不同的键。我希望通过其他键搜索下拉菜单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

您可以使用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，但如果您添加了其他键，它也会将它们包含在搜索中，因此只需迭代数组并附加value label等于tab键或tabValue键的键，它将搜索所有键，但请记住，对于显示，react-select显示label关键内容