reactjs - react-select 在 MenuList 中添加搜索输入

Question

我正在使用 react-select ( https://react-select.com ) 并且我试图在 MenuList 本身(在顶部)中添加一个搜索输入，而不是从容器搜索的默认行为。

<Select
   ...
   components={{
      ...
      MenuList: (props: any) => {
         return (
            <components.MenuList {...props}>
               <div className="search-wrapper">
                  <input 
                     value={search}
                     onChange={searchChange}
                     placeholder="Search"/>
                </div>
                {props.children}
             </components.MenuList>
          );
       },
   }}
>
</Select>

它正在工作，我在菜单顶部得到了一个很好的输入:



但输入似乎被禁用。 (在输入中添加 disabled=false 不会产生任何影响)

有什么想法吗？为什么会这样？
实现此类功能的正确方法是什么？

Answer 1

这个变体对我有用。
首先你应该删除 innerProps Prop 来自 components.Menu .
我没试过 components.MenuList ，但我想它也应该有效。<components.MenuList {...props} innerProps={undefined}>然后您将能够使用输入，但每次单击时菜单都会关闭，因此:
其次，您应该使用 menuIsOpen 控制菜单状态支柱。
首先，您可以覆盖 SelectContainer:

const SelectContainer: React.FC<CommonProps<object, false>> = ({ children, ...props }) => (
  <components.SelectContainer {...props}>
    <div onClick={() => setMenuOpen(true)}>
      {children}
    </div>
  </components.SelectContainer>
);

然后添加一个处理程序以在菜单内单击时关闭菜单。