Javascript 单击向下/向上键可在ul元素内滚动-反应

我在react中尝试制作自己的自动完成组件时遇到问题。。 我创建了一个组件来呈现结果并在包装上设置最大高度， 我在输入元素上使用了onKeyDown事件来跟踪向下/向上按键。现在我用它来标记活动项。。。但是当我设置的最大高度太小，并且当“活动项”超出div的高度限制时，侧边有一个滚动条，滚动条不会随之下降。。。我怎样才能修好它

import React，{useState，useffect}来自“React”
常量自动完成=（{options}）=>{
常量[activeOption，setActiveOption]=useState（4）
常量[filteredOptions，setFilteredOptions]=useState（[]）
const[showOptions，setShowOptions]=useState（false）
常量[userInput，setUserInput]=useState（“”）
useffect（（）=>{
设置显示选项（用户输入）
设置过滤器安装([
…选项.filter(
option=>option.toLowerCase（）.indexOf（userInput.toLowerCase（））>-1
)
])
setActiveOption（0）
}，[userInput]）
常量handleKeyDown=e=>{
如果（e.key==“箭头向下”）{
if（activeOption==filteredOptions.length-1）返回
setActiveOption（activeOption+1）
}
如果（e.key==“ArrowUp”）{
如果（activeOption==0）返回
setActiveOption（activeOption-1）
}
}
返回(
setUserInput（e.target.value）}
onKeyDown={handleKeyDown}
/>

{显示选项&&
filteredOptions.map（（选项，i）=>(

{option}

))}

)
}
导出默认自动完成
函数App（）{
返回(
)
}

。选项处于活动状态{
字体大小：粗体；
背景：矢车菊蓝；
}
.选项{
高度：100px；
溢出：覆盖；
}

我认为您可以维护一个元素引用数组，以便在活动选项更改时调用该元素的

scrollIntoView

方法

未测试代码：

//使用ref容器（我们不会使用'current`）
常量elmRefs=useRef（）
//相反，我们为每个选项在ref的每个键中构建一个自定义ref对象
useffect（（）=>{
options.forEach（opt=>elmRefs[opt]={current:null}
}，[选项]）
//当活动元素更改时滚动该元素的效果
useLayoutEffect（（）=>{
//这就是使元素可见的原因
elmRefs[options[activeOption].current.scrollIntoView（）
}，[options，activeOption]）
//在“渲染”区域中，将每个选项连接到elmRefs

{option}

让我知道你的想法

编辑：

如果需要立即初始化ELMREF，可以执行以下操作：

//外部组件
const initRefs=options=>Object.fromEntries（options.map（o=>[o，{current:null}]））
//然后在组件中，将useRef替换为：
常量elmRefs=useRef（initRef（选项））

---

并在代码的其余部分将

elmRefs

替换为

elmRefs.current

。

您是否在新选定的元素上尝试过

setFocus

（container.scrollHeight+container.offsetHeight）；