Append a button at the end of options in react-select

问题

I am using react-select library to implement search and select functionality in my project.

As a basic usage, I can only select the options returned after the search. It looks like this whose code is:

<AsyncSelect
       onChange={(item) => _selectedItemChange(item)}
       loadOptions={loadItemOptions}
       placeholder='Start typing'
 />

Now, I want a button at the lower end of the select box so that I can do like 'Not found? Add New' type of stuff. Something like this. I also want that button's onClick function to be my own.

How can I do this?

回答1:

From the answer of @PasVV, I was able to make something, I have wanted to. By passing props to the AsyncSelect Component, we can make our own custom Menu(Customizable component in react-select) as follows.

const CustomMenu = ({ innerRef, innerProps, isDisabled, children }) =>
        !isDisabled ? (
            <div ref={innerRef} {...innerProps} className="customReactSelectMenu">
                {children}
                <button
                    className="btn btn-info btn-sm btn-block"
                    onClick={() => ...}
                >Add New</button>
            </div>
        ) : null;

And passing it to <AsyncSelect/>

<AsyncSelect
        onChange={_change}
        loadOptions={loadVendorOptions}
        placeholder='Start typing'
        components={{ Menu: CustomMenu }}
/>

回答2:

To achieve your goal, you may replace logic of react-select MenuList component.

You can find some examples in documentation.

I suppose it is the best way to add some custom functionality in your react-select component.

来源：https://stackoverflow.com/questions/62621416/append-a-button-at-the-end-of-options-in-react-select

标签

javascript

reactjs

react-select