REACT引导 - 如何使内FormControl组件属性和选项标签？

Question

在一般情况下，阵营引导允许我使用各类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

看到了类似的问题，

你不能optiontag中使用的标签。

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

你也可以这样做的，你这样做是为了placeholder或value什么。结帐的HTML参考！

还检出selectize库，它可以帮助你得到你想要的东西。如果你想实现这样的事情你自己，这也是一个良好的开端，你可以检出的源代码。

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