0

Всем привет, хочу сделать input для ввода телефона с выбором начала номера и флагом, вот пример

пример

Делаю так

import React from "react";
import { Dropdown, Input } from "semantic-ui-react";
import countries from "./common";

const PhoneInput = () => (
    <div>
        <Input
            action={
                <Dropdown
                    left="true"
                    button
                    basic
                    floating
                    defaultValue="af"
                    options={countries}
                />
            }
            actionPosition={"left"}
            placeholder="Phone"
        />
    </div>
);
export default PhoneInput;

В файле common массив такого типа

{ text: "Afghanistan +540", flag: "af", value: "af", key: "af" }

В результате выходит

что получилось

Как сделать так что бы при выборе отображался не текст а флаг?

1 ответ 1

1

К сожалению то что Вы пытаетесь сделать на данный момент невозможно. Здесь можно посмотреть ответ создателя SemanticUI по этому поводу.

text Displayed in the Dropdown Input after the item is made active, should be a string.

(перевод): text отображается в инпуте дропдауна после того как элемент списка был выбран, и должен быть строкой

Dropdown Item content only appears in the Menu, not in the Input once made active.

(перевод): content отображается только в выпадающем списке, и не отображается в поле инпута после выбора

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.