реагировать на выбор пользовательского заголовка - PullRequest
Новая
       7

реагировать на выбор пользовательского заголовка

1 голос
/ 15 октября 2019

Как установить пользовательский компонент для выбранного значения с помощью реагировать на выбор, я смог настроить параметры, но как насчет самого выбранного параметра, было бы разумно иметь такой же выбранный компонент, как и параметры, какие-либо идеи? 

<Select 
 components={{ Option: CustomOption }}
 options={options} 
 styles={customStyles} 
/>;

Компонент: 

    const CustomOption =  ({ value, label, innerProps, innerRef }) => (
        <div ref={innerRef {...innerProps}>
        <img src={label === 'En' ? pngEn : label === 'Ru' ? pngRu : pngLt} />
       <div>{label}</div>
</div>
);

Редактировать, параметры ниже, я хочу, чтобы флаг был виден, тогда выбран параметр, вероятно из-за пользовательских параметров: 

const options = [
  { value: "lt", label: "Lt" },
  { value: "en", label: "En" },
  { value: "ru", label: "Ru" },
];

enter image description here

1 Ответ

0 голосов
/ 18 октября 2019

Я думаю, что самый простой способ сделать это - использовать пользовательский компонент Option точно так же, как вы это сделали, и хранить дополнительные реквизиты внутри options, чтобы получить соответствующее изображение, которое вы хотите отобразить.

Ниже приведен пример с библиотекой react-icons вместо использования изображения, но идея та же: 

const Option = props => {
  const CComponent = props.data.icon;
  return (
    <div style={{ display: "flex" }}>
      <CComponent />
      <components.Option {...props} />
    </div>
  );
};
const options = [
  { label: "Option 1", value: 1, icon: FaOpera },
  { label: "Option 2", value: 2, icon: FaFirefox },
  { label: "Option 3", value: 3, icon: FaInternetExplorer }
];

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

Живой пример здесь .

...