如何从所选项目开始在自定义选择输入中显示菜单项？

Question

所以我有自定义选择输入，其中包含菜单项（可选项目列表）。现在，当我们点击选择输入时，它会打开一个下拉菜单，显示前 10 个项目（可见项目 = 10）。我使用以下 css 完成了此操作：-

style={{ maxHeight: `${visibleItems ? `calc(1.5rem * ${visibleItems}` : 'auto'}`, ...style }}

假设我选择了商品编号。 12 即使选择了第 12 个项目，下拉菜单仍将仅显示前 10 个项目。我想实现它，以便可见的项目列表包含之前选择的项目。我想有一个类似于 react-select 组件的行为，你可以在这里找到 https://react-select.com/home 。

如果有人能帮我提供一些关于如何进行的建议，我会很高兴。由于一些限制，我不能在这里粘贴完整的代码，但如果有人能帮助我，我将非常感激。

Answer 1

你需要 2

state

s。一个用于您使用过的可见项目。另一个是选择项目时。然后你可以扩展你的

if

语句来检查是否有被选中的项目，没有必要显示这个

height

。考虑一下，这第二个

state

可以包含与所选项目相关的

id

。所以你可以过滤掉它只显示它。

如果你能给我看代码，我可以帮你写代码。

Answer 2

如果你所有的项目都存储在一个数组中，最好的方法是使用 Array.prototype.sort() 函数，显然它可以在不改变数组大小的情况下对数组的所有元素进行排序。 它接受一个自定义函数作为参数来比较这样的元素：

function compareFn(a, b) {
    if (a is less than b by some ordering criterion) {
        return -1;
    }
    if (a is greater than b by the ordering criterion) {
        return 1;
    }
}

在您的情况下，您可以放置一个函数来检查是否选择了该项目，然后它将在您的列表中首先显示您选择的项目。 希望这有帮助。

Answer 3

我找到了我一直在寻找的答案。当在选择输入中打开菜单时，您可以只使用 scrollIntoView() 方法滚动到菜单中的特定项目。您可以使用活动项目的参考来调用它。

 activeItemRef.current.scrollIntoView();