如何自定义下拉菜单

Question

我有兴趣确定我是否可以完全自定义响应用户在select2文本字段中输入文本（使用react-select组件）而出现的下拉菜单。

我希望文本生成的输出类似于Apple的Spotlight OS功能中显示的输出（请参见屏幕快照-在其中键入文本“ mini”）。

使用react-select可以吗？有样品吗？

我发现此仓库（https://github.com/bvaughn/react-virtualized-select/）似乎支持我想做的事情-但不再受支持。

谢谢 戴夫

Answer 1

当然，您可以使用react-select中实现的components framework自定义下拉菜单的内容。您必须覆盖Menu组件才能向下拉菜单添加新内容。您可能还必须使用styles api设置一些样式。

const Menu = ({ children , ...props }) => {
    return <components.Menu>
        <div> My custom content </div>
        {children} // This contains the `MenuList` component with the options
    </components.Menu>
}

<Select
    { ... }
    components={{
        Menu
    }}
/>

要实现类似Apples Spotlight的功能，您必须进行一些更高级的自定义。 This example显示了如何实现的基本实现。