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

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

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

Я новичок в Реакте, а также новичок в реакции-выбора (v2).

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

Мы хотим:

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

Мы получили большую часть пути с помощью этого примера (который был более полезным, чем официальные документы 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>
    );
};

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

1 Ответ

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

Вы действительно одеты, но позвольте мне показать вам, как сохранить исходные стили и поведение 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>
  );
};

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

...