在 react-select 中的选项末尾附加一个按钮

Question

我正在使用react-select库在我的项目中实现搜索和选择功能。

作为基本用法，我只能选择搜索后返回的选项。看起来像这样，其代码是：

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

现在，我想在选择框的下端有一个按钮，这样我就可以像“未找到？添加新的'类型的东西。像这样的东西 。我还希望该按钮的 onClick 功能是我自己的。

我怎样才能做到这一点？

Answer 1

import { components } from 'react-select';

const SelectMenuButton = (props) => {
    return (
        <components.MenuList  {...props}>
            {props.children}
            <button>Add new element</button>
        </components.MenuList >
    ) }

<Select   components={{ MenuList: SelectMenuButton }} />

Answer 2

从@PasVV的回答来看，我能够做一些我想做的事情。通过将 props 传递给 AsyncSelect 组件，我们可以制作自己的自定义菜单（react-select 中的可自定义组件），如下所示。

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;

并将其传递给<AsyncSelect/>

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