Question

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

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

My React版本：15.6.2
react-select version：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},
]

现在我想通过＆＃39;标签＆＃39;来搜索数据。下拉列表中的关键。

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上进行搜索，但如果您添加了其他密钥，它也会将其包含在搜索中，因此只需迭代数组并附加{{ 1}} value个键等于label键或tab键，它会全部搜索它们，但请记住，为了显示，tabValue会显示react-select 1}}关键内容

Answer 3

您尝试使用filterProp =“ tab”和matchProp =“ label”吗？

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

3 个答案: