React Bootstrap-如何在FormControl属性和选项标签中呈现组件？

Question

通常，React Bootstrap允许我这样使用各种类型的FormControls：

// Input field 
<FormControl
    type="text"
    placeholder="Placeholder text"
    value={this.props.value}
    inputRef={(ref) => this.inputfield = ref}
/>

// Dropdown menu
<FormControl componentClass="select"
    defaultValue={this.props.someId}
    inputRef={(ref) => this.dropdownmenu = ref}
>
    <option key='firstoption' value={0}>Select Options</option>
    {this.props.options.map((o) =>
        <option key={o.id} value={o.id}>{o.description}</option>
    )}
</FormControl>

但是，现在说我想在文本字段内以及下拉菜单的某些选项上添加一个“标签”。

我附了一张图片，向您展示我的意思。

我想要一个蓝色框，用于在输入字段中显示某个标签的名称，如果有人在其中键入内容，他们将在标签的右侧而不是其下方或上方键入内容。

同样，我希望标签显示在下拉菜单中（在展开的视图中显示，以及在选择后如何显示）。

有人知道如何实现这一目标吗？

我唯一尝试过的是：

import React from 'react';

export class TagComponent extends React.Component {
    render() {
        return (
            <span className="somecss">Some Tag</span>
        );
    }
}

-------------------------
// Input field 
<FormControl
    type="text"
    placeholder={this.props.ifTagExists && <TagComponent /> && "Placeholder Text"}
    value={this.props.ifTagExists && <TagComponent /> && this.props.value}
    inputRef={(ref) => this.inputfield = ref}
/>

// Dropdown menu
<FormControl componentClass="select"
    defaultValue={this.props.someId}
    inputRef={(ref) => this.dropdownmenu = ref}
>
    <option key='firstoption' value={0}>Select Options</option>
    {this.props.options.map((o) =>
        <option key={o.id} value={o.id}>{o.ifTagExists && <TagComponent />} {o.description}</option>
    )}
</FormControl>

对此进行了尝试，但未呈现标签组件。任何帮助将不胜感激。

Answer 1

看到类似的问题，

  

您不能在option标记内使用标记。

Can I use HTML tags in the options for select elements?

此外，您无法为placeholder或value做任何事情。 检出html参考！

还签出selectize库，它可以帮助您获得所需的内容。如果您想自己实现类似的东西，那也是您可以签出源代码的一个很好的开始。

http://furqanzafar.github.io/react-selectize/#/