реагировать на выбор Отображать пользовательский компонент как SingleValue - PullRequest
Новая
       3

реагировать на выбор Отображать пользовательский компонент как SingleValue

0 голосов
/ 10 апреля 2019

Мне нужно отобразить значок перед выбранным значением, используя react-select и машинописный текст.

Это то, что я пробовал до сих пор: 

SingleValue: React.SFC<SingleValueProps<OptionType>> = ({ children, ...props }) => (
    <components.SingleValue {...props}>
      <i className={`fal fa-${this.props.icon} has-text-grey-light`} /> {children}
    </components.SingleValue>
  )

Основная проблема связана с определениями типовкоторый ожидает, что потомки, переданные в components.SingleValue, должны быть строкой.

1 Ответ

0 голосов
/ 10 апреля 2019

Вам не нужно использовать стандартные компоненты. Вы можете легко создать пользовательский, но при этом сохранить нужные ему стили.

Единственное требование, которое вам нужно, это emotion, чтобы получить стили, используемые компонентом SingleValue. 

/**
 * This Example uses the `FontAwesome` React library.
**/

const options = [
  { label: "Value A", value: "a", icon: faCoffee },
  { label: "Value B", value: "b", icon: faCar },
  { label: "Value C", value: "c", icon: faMobile },
  { label: "Value D", value: "d", icon: faCircle },
  { label: "Value E", value: "e", icon: faSquare }
];

const SingleValue = ({
  cx,
  getStyles,
  selectProps,
  data,
  isDisabled,
  className,
  ...props
}) => {
  console.log(props);
  return (
    <div
      className={cx(
        emotionCss(getStyles("singleValue", props)),
        {
          "single-value": true,
          "single-value--is-disabled": isDisabled
        },
        className
      )}
    >
      <FontAwesomeIcon icon={data.icon} style={{ marginRight: 10 }} />
      <div>{selectProps.getOptionLabel(data)}</div>
    </div>
  );
};

export default class MySelect extends Component {
  render() {
    return (
      <Select
        options={options}
        components={{ SingleValue }}
        styles={{
          singleValue: (provided, state) => ({
            ...provided,
            display: "flex", // To keep icon and label aligned
            alignItems: "center"
          })
        }}
      />
    );
  }
}

Рабочий пример

...