React-Select - замена компонентов для содержимого пользовательских параметров - PullRequest
Новая
       12

React-Select - замена компонентов для содержимого пользовательских параметров

0 голосов
/ 15 октября 2018

Использование React-Select (версия 2) Я хотел бы иметь пользовательские опции (select).

Документация предполагает, что Замена компонентов будет методом, который я мог бы использовать длядобиться этого.

К сожалению, я не могу найти примеры, показывающие реализации этой функции.

Есть ли кто-нибудь, кто мог бы представить мне использование этой функции, при которой у вас был бы простой пользовательский параметр(возможно, метка и значение, которые также включают SVG-изображение слева от каждой метки опции).

Заранее большое спасибо

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

В большинстве случаев вам, вероятно, не нужно заменять полный компонент Option.Если вы хотите остаться с той же общей структурой и внешним видом и возможностями Option, но хотите отобразить несколько блоков текста, или изображение, или какую-то другую специальную обработку для тела каждого параметра, есть более простой способ.way.

Для использования formatOptionLabel рендера.

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

const options = [
  { value: "Abe", label: "Abe", customAbbreviation: "A" },
  { value: "John", label: "John", customAbbreviation: "J" },
  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];

const formatOptionLabel = ({ value, label, customAbbreviation }) => (
  <div style={{ display: "flex" }}>
    <div>{label}</div>
    <div style={{ marginLeft: "10px", color: "#ccc" }}>
      {customAbbreviation}
    </div>
  </div>
);

const CustomControl = () => (
  <Select
    defaultValue={options[0]}
    formatOptionLabel={formatOptionLabel}
    options={options}
  />
);

ReactDOM.render(<CustomControl />, document.getElementById("root"));

https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

https://react -select.com / props - поиск в форматеOptionLabel

0 голосов
/ 17 октября 2018

Вы можете заменить любой компонент, включив переопределение в свойстве компонентов. 

<Select components={{Option: MyOption}} />

Что-то вроде: 

const Option = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className="custom-option">
      <h4>{props.data.artist}</h4>
      <div className="sub">{props.data.title} </div>
    </article>
  );
};

<Select components={{Option}} />

Свойства innerRef и innerProps очень важны, поскольку они переносят такие вещи, как hover и onClick, необходимые для Option.data в реквизитах - это то место, где находятся ваши опции.

...