React-Select:如何在将 HTML 传递给选项中的标签值时保持搜索能力

IT技术 reactjs react-select
2021-05-20 10:01:24

我有一个可搜索的 react-select 字段,我将 HTML 传递给label值。搜索在添加 HTML 之前有效,但可以理解的是,在此之后,它不再有效。在将 HTML 传递给标签时,我可以做些什么来修复可搜索性?

这篇文章回答了我原来的问题(你能不能把 HTML 传递给标签)的答案:react-select escapes html chars

  [
    { value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar &amp; foo' }} /> },
  ]
1个回答

如果您查看 react-select 的 GitHub 代码:https : //github.com/JedWatson/react-select/blob/79c9e9deedaa57885d30aa8f19d1892d39e4d236/packages/react-select/src/types.js#L118

您将看到该标签仅支持字符串。我认为你需要使用这个功能formatOptionLabel

<Select
    multi={true}
    options={this.state.options}
    onChange={this.handleOnChange.bind(this)}
    value={this.state.multiValue}
    formatOptionLabel={function(data) {
        return (
            <span dangerouslySetInnerHTML={{ __html: data.label }} />
        );
    }}
    isSearchable={true}
    placeholder="eee"
/>