React-Select:如何在将 HTML 传递给选项中的标签值时保持搜索能力 [英] React-Select: How to maintain search-ability while passing HTML to the label value in options

问题描述

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

这个帖子回答了我原来的问题(你能不能把 HTML 传递给标签)的答案:反应选择转义 html 字符

<预><代码> [{ value: 'foo', label: <span risklySetInnerHTML={{ __html: 'bar &amp;foo' }}/>},]

解决方案

如果你查看 react-select 的 GitHub 代码:https://github.com/JedWatson/react-select/blob/78deeda2a3d9e/78deeda2d39e4d236/packages/react-select/src/types.js#L118" rel="nofollow noreferrer">a-aaa8f19d1892d39e4d236/packages/react-select/src/types.js#L118" rel="nofollow noreferrer">a-aaa8f19d1892d39e4d236/packages/react-select/src/types.js#L118" rel="nofollow noreferrer">a.js#L118

您将看到标签仅支持字符串.我认为你需要使用这个函数 formatOptionLabel

<选择多={真}选项={this.state.options}onChange={this.handleOnChange.bind(this)}值={this.state.multiValue}formatOptionLabel={function(data) {返回 (<span risklySetInnerHTML={{ __html: data.label }}/>);}}isSearchable={true}占位符=eee"/>

I have a searchable react-select field where I'm passing HTML into the label value. Searching works prior to adding HTML, but after and understandably, it no longer works. Is there something specific I can do to repair the searchability while passing HTML to the label?

The answer to my original question (can you pass HTML to the label) was answered by this post: react-select escapes html chars

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

解决方案

If you look at the GitHub code for react-select: https://github.com/JedWatson/react-select/blob/79c9e9deedaa57885d30aa8f19d1892d39e4d236/packages/react-select/src/types.js#L118

You are going to see that label only supports a string. I think you need to use this function 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"
/>

这篇关于React-Select:如何在将 HTML 传递给选项中的标签值时保持搜索能力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！