javascript - How to add defaultOption to AsyncSelect? - Stack Overflow

admin管理员组

文章数量:1391947

I am using Async react-select for my ponent and can't solve an issue with default Options . Docs couldn't help me , because there were not such an example related to my issue .

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;

I want to add an option which will let the users to select all options . So in case of AsyncSelect , options are being loaded asynchronously. Docs say we can use defaultOptions.

The defaultOptions prop determines "when" your remote request is initially fired. There are two valid values for this property. Providing an option array to this prop will populate the initial set of options used when opening the select, at which point the remote load only occurs when filtering the options (typing in the control). Providing the prop by itself (or with 'true') tells the control to immediately fire the remote request, described by your loadOptions, to get those initial values for the Select.

And when us it , i only get that default option in my dropdown like this`

But my goal is to get a ponent like in this pic `

I am using Async react-select for my ponent and can't solve an issue with default Options . Docs couldn't help me , because there were not such an example related to my issue .

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;

I want to add an option which will let the users to select all options . So in case of AsyncSelect , options are being loaded asynchronously. Docs say we can use defaultOptions.

The defaultOptions prop determines "when" your remote request is initially fired. There are two valid values for this property. Providing an option array to this prop will populate the initial set of options used when opening the select, at which point the remote load only occurs when filtering the options (typing in the control). Providing the prop by itself (or with 'true') tells the control to immediately fire the remote request, described by your loadOptions, to get those initial values for the Select.

And when us it , i only get that default option in my dropdown like this`

But my goal is to get a ponent like in this pic `

• javascript
• reactjs
• react-select

Share Improve this question Follow edited Feb 5, 2019 at 13:52 Norayr Ghukasyan asked Feb 5, 2019 at 13:10 Norayr GhukasyanNorayr Ghukasyan 1,41822 gold badges1919 silver badges3939 bronze badges 4

• Your first picture shows an option 'All campaigns', but I don't see how that is added in your code. Looks like you are setting options to an empty array in defaultProps. Where did that 'All campaigns' option e from? Also I think it would be helpful if you can provide a simplified codesandbox. – mehamasum Commented Feb 5, 2019 at 13:47
• I updated my code... – Norayr Ghukasyan Commented Feb 5, 2019 at 13:52
• When you start typing, do the other options show up? – mehamasum Commented Feb 5, 2019 at 13:55
• Yes , it shows the options list filtered by input value. – Norayr Ghukasyan Commented Feb 5, 2019 at 13:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I think the best way to achieve your desired result is to add a custom option to whatever campaignToOption returns.

For example you could use this method to append a special option to your array:

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

Keep defaultOptions to True (not an array).

Here is a simplified version of your scenario but I hope it helps:

本文标签： javascriptHow to add defaultOption to AsyncSelectStack Overflow