Как добавить defaultOption в AsyncSelect? - PullRequest
Новая
       6

Как добавить defaultOption в AsyncSelect?

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

Я использую Async реагировать на выбор для своего компонента и не могу решить проблему с настройками по умолчанию.Документы не могли мне помочь, потому что не было такого примера, связанного с моей проблемой.

const campaignToOption = campaign => ({value: campaign.id, label: campaign.name});

const loadOptionsWrapper = fetchAll =>
    input => fetchAll({
        _limit: 10000,
        q: input,
        _sort: 'name',
        _order: 'asc',
    }).then(campaigns => _(campaigns).reject('meta').map(campaignToOption).values());

const defaultProps = {
    options: [],
    placeholder: 'Campaign: Not selected',
};

const CampaignFilter = props => {
    return <Async
        defaultOptions={[{label: 'All Campaigns', value: '-2', group: true}]}
        loadOptions={loadOptionsWrapper(props?.actions?.fetchAllCampaigns)}
        {...defaultProps}
        {...props}
    />;
};

export default CampaignFilter;

Я хочу добавить параметр, который позволит пользователям выбирать все параметры.Таким образом, в случае AsyncSelect параметры загружаются асинхронно.Документы говорят, что мы можем использовать defaultOptions.

Пропорция defaultOptions определяет «когда» ваш удаленный запрос первоначально запускается.Для этого свойства есть два допустимых значения.Предоставление массива опций для этого реквизита заполняет начальный набор опций, используемых при открытии выбора, после чего удаленная загрузка происходит только при фильтрации опций (ввод в элементе управления).Предоставляя саму опору (или с помощью 'true'), элемент управления немедленно запускает удаленный запрос, описанный вашими loadOptions, чтобы получить эти начальные значения для Select.

И когдаиспользуя это, я получаю только ту опцию по умолчанию в моем выпадающем меню, как это` enter image description here

Но моя цель - получить компонент, как на этом рисунке `

enter image description here

1 Ответ

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

Я думаю, что лучший способ достичь желаемого результата - добавить пользовательский параметр к тому, что campaignToOption возвращает.

Например, вы можете использовать этот метод для добавления специальной опции к вашему массиву: 

const appendSpecialOption = filteredOptions => {
  return [
    { label: "All Campaigns", value: "-2", group: true },
    ...filteredOptions
  ];
};

Сохранить defaultOptions в True (не массив).

Вот упрощенная версия вашего сценария, но я надеюсь, что это поможет:

Edit react-codesandboxer-example

...