在 react-select 中的选项末尾附加一个按钮 [英] Append a button at the end of options in react-select

问题描述

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

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

_selectedItemChange(item)}loadOptions={loadItemOptions}占位符='开始打字'/>

现在，我希望在选择框的下端有一个按钮，这样我就可以执行未找到?添加新的'类型的东西.类似于this.我还希望该按钮的 onClick 函数是我自己的.

我该怎么做?

解决方案

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

const CustomMenu = ({ innerRef, innerProps, isDisabled, children }) =>！被禁用 ?(<div ref={innerRef} {...innerProps} className=customReactSelectMenu">{孩子们}<按钮className =btn btn-info btn-sm btn-block";onClick={() =>...}>新增</按钮>

) : 空值;

并将其传递给

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?

解决方案

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 }}
/>

这篇关于在 react-select 中的选项末尾附加一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！