React Bootstrap - Как визуализировать компоненты в атрибутах FormControl и тегах параметров? - PullRequest
Новая
       5

React Bootstrap - Как визуализировать компоненты в атрибутах FormControl и тегах параметров?

0 голосов
/ 04 февраля 2019

В общем, 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>

Однако, теперь скажем, что я хочу добавить «тег» внутри текстового поля и для некоторых опцийвыпадающего меню.

Я включил картинку, чтобы показать вам, что я имею в виду.enter image description here

Я хочу, чтобы синее поле показывало имя определенного тега в поле ввода, и если кто-то печатает его, они вводят справа от тега, а не под нимили поверх него.

В том же духе я хочу, чтобы тег отображался в раскрывающемся меню (показано в развернутом виде и как это будет при выборе).

Кто-нибудь знает, какчтобы достичь этого?

Единственное, что я попробовал, это: 

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>

Попробовал это, и он не рендерил компонент тега.Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 04 февраля 2019

см. Аналогичный вопрос,

вы не можете использовать теги внутри тега option.

Могу ли я использовать теги HTML в опциях для выбранных элементов?

Также вы не можете делать ничего из того, что делаете для placeholder или value.Ознакомьтесь с html-справкой!

также обратитесь к библиотеке selectize, это может помочь вам получить то, что вы хотите.если вы хотите реализовать что-то подобное самостоятельно, это также хорошее начало, где вы можете получить исходный код.

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

...