如何向 React-Select 添加更多可搜索选项？

IT技术 javascript reactjs react-select
2022-07-23 01:47:06

所以我需要做的是让 react-select 的搜索表单不仅对 id 值做出react，而且我还希望它能够搜索选择选项的同义词。

例如在度量单位列表中：

{
"id": "MIN",
"name": "minute",
"synonym": "time"
}

我希望能够输入“分钟”、“分钟”或“时间”并最终选择“分钟”。

我尝试将另一个元素推入数组：

mapUnitOfMeasure()
{
    const results = [ ];
    for(const c of measureUnits)
        results.push({ value : c.id, label : c.name, syn: c.synonym });
    }
    return results
}

在我的渲染方法中，选择元素如下所示：

<Select
                className="react-select"
                placeholder=""
                disabled={this.state.disabled}
                value={this.state.value}
                onChange={this.handleChange.bind(this)}
                onBlur={this.handleBlur.bind(this)}
                searchable={true}
                clearable={true}
                multi={false}
                noResultsText={i18n.getMessage('CurrencyInput.search.form.noResults')}
                options={this.mapUnitOfMeasure()} />
        )

但是“syn”永远不会对搜索查询做出react。

任何人都知道我怎样才能使它工作？

1个回答

我建议您使用filterOptions允许您创建自己的过滤器功能的props。

默认情况下，它的工作方式如下：

filterOptions={(options, filter, currentValues) => {
  // Do no filtering, just return all options
  return options;
}}

如果你想进行搜索label，syn你可以使用这样的功能：

filterOptions = (options, filterString, values) => {
  return options.filter(
    x => x.synonym.includes(filterString) || x.label.includes(filterString)
  );
};

警告

使用filterOptions将覆盖filterOption、matchPos、matchProp和ignoreCase选项ignoreAccents。你将不得不自己照顾这些props。

这里有一个活生生的例子。

其它你可能感兴趣的问题
上一篇TypeError：当我尝试使用 JEST 测试方法时，调度不是函数 下一篇Typescript addEventListener to keydown 给出错误