Как я могу применить стили по умолчанию для реакции-выбора при определении настраиваемого компонента Option?

Я новичок в React, а также новичок в response-select (v2).

Я думаю, что наш сценарий довольно прост. Мы извлекаем данные из Поиска Azure (фасеты) и хотим привязать их к слегка настроенному элементу управления response-select.

Мы хотим:

  1. Добавьте значок / таблетку, чтобы в раскрывающемся списке отображалось количество.
  2. Избегайте циклического перебора возвращаемых данных для дублирования значения и метки в параметрах реакции-выбора.

Мы прошли большую часть пути с помощью этого примера (который был более полезен, чем официальные документы IMO): React-Select - Замена компонентов для содержимого настраиваемых параметров. Единственное, чего не хватает, - это применения стилей реакции-выбора по умолчанию (например, для наведения).

Пример данных:

const myOptions = [
    { value: 'foo', count: 100 },
    { value: 'bar', count: 200 },

];

Пример настраиваемого элемента управления:

const CustomOption = (props:any) => {
    const { innerProps, innerRef } = props;
    return (
        <article ref={innerRef} {...innerProps} >
            <div style={{display:"inline-block"}}>{props.data.value}</div>
            <span className="badge badge-light float-right" style={{display:"inline-block"}}>{props.data.count} </span>
        </article>
    );
};

Есть ли способ повторно использовать стили реакции-выбора по умолчанию? Я что-то упускаю в документации?


reactjs react-select
person Jay Derus    schedule 28.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы действительно ткань, но позвольте мне показать вам, как сохранить оригинальные стили и поведение react-select.

Вместо объявления нового контейнера для вашего Option компонента вам нужно использовать исходный и редактировать только содержимое следующим образом:

const Option = props => {
  return (
    <components.Option {...props}>
      <div style={{ display: "inline-block" }}>{props.data.value}</div>
      <span
        className="badge badge-light float-right"
        style={{ display: "inline-block" }}
      >
        {props.data.count}{" "}
      </span>
    </components.Option>
  );
};

Здесь живой пример обновленного кода.

person Laura    schedule 28.02.2019
comment
Это идеально подходит для стилей раскрывающегося списка. Спасибо! Однако при выборе одного текста текст не отображается. Возможно, это ограничение модели данных. Как вы думаете, поможет ли я уточнить вопрос или разделить на несколько вопросов? - person Jay Derus; 28.02.2019
comment
@JayDerus это потому, что вы объявили свои параметры как следующую структуру [{value: ..., count: ...}], а не [{value:..., label:...}], поэтому я обновил свой живой пример, чтобы вы могли увидеть его в действии. - person Laura; 28.02.2019