Javascript 如何使用react将元素滚动到视图中？

我是编程新手，我想实现一个下拉菜单，用户可以使用向上和向下箭头键导航下拉项目，并使用enter键选择下拉项目

另外，我希望突出显示的下拉项在窗口中对用户可见，而不使用下拉菜单滚动条

为了实现这一点，我实现了下面的代码， 它很好用。但当按下向上箭头键时，突出显示的下拉菜单不在窗口视图中，这意味着它不能滚动查看

class Dropdownwithinput扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
this.list_item_ref=React.createRef（）；
此.state={
输入值：“”，
下拉菜单_值：[]，
项目选择：0，
};
}
componentDidMount=（）=>{
常量值=[
{
id:1，
姓名：某某，
},
{
id:2，
姓名:fname,，
},
{
id:3，
姓名:lname,，
}
],
this.setState（{dropdown_values:values}）；
}
handle_key_down=（事件）=>{
如果（this.state.dropdown_值>0）{
如果（event.keyCode==38&&this.state.item\u选择
> 0) {
此.setState（{item_selection:
（this.state.item_选择-1）%
this.state.dropdown_values.length}）；
让子数组=
Array.from（this.list\u item\u ref.current.children）；
const element\u found=child\u array.find（e=>
e、 包含（“测试”）&&
e、 classList.contains（“突出显示”）
);
找到元素&&element_.scrollIntoView（）；
}else if（event.keyCode===40）{
此.setState（{item_selection:
（this.state.dropdown_值_选择+1）%
this.state.dropdown_values.length}）；
让子数组=
Array.from（this.list\u item\u ref.current.children）；
const element\u found=child\u array.find（e=>
e、 包含（“测试”）&&
e、 classList.contains（“突出显示”）
);
找到元素&&element_.scrollIntoView（）；
}
如果（event.keyCode===13）{
event.preventDefault（）；
const selected_项=
this.state.dropdown_值[this.state.user_选择]；
const text=this.replace（this.state.input_val，
选定项目）；
这是我的国家({
输入值：文本，
下拉菜单_值：[]，
});
}
}
替换=（输入值，所选项目）=>{
//某些函数将输入字段中的值替换为
//所选下拉项
}
渲染=（）=>{
返回(
{this.state.dropdown_values.map（（项，索引）=>(
{item.name}
))}
)
};
}
}

---

我认为问题在于handle\u key\u down方法本身。有人能帮我修一下吗。谢谢。

之前的代码有很多改进，我们可以开始调试，比如render方法在handle\u key\u down函数中，React.PureComponent而不是React，Component。你能把代码带到我们能看到实际问题的地方吗？谢谢。如果handle\u key\u down方法中的（event.keyCode===38&&this.state.item\u selection>0）工作不正常，我认为它在这种情况下。这意味着它没有在视图中显示元素。element_found变量始终包含以前高亮显示的元素，这意味着如果当前高亮显示的元素是“fname”…element_found包含somename。

class Dropdownwithinput extends React.PureComponent {
    constructor(props) {
        super(props);
        this.list_item_ref = React.createRef();
        this.state = {
            input_val: '',
            dropdown_values: [],
            item_selection: 0,
        };
    }

    componentDidMount = () => {
        const values = [
            {
                id:1,
                name: somename,
            },

            {
                id: 2,
                name: fname,
            },
            {
                id: 3,
                name: lname,
            }
        ],
        this.setState({dropdown_values: values});
    }

    handle_key_down = (event) => {
        if (this.state.dropdown_values > 0) {
            if (event.keyCode === 38 && this.state.item_selection 
            > 0) {
                this.setState({item_selection: 
                (this.state.item_selection - 1) % 
                this.state.dropdown_values.length});
                let child_array = 
                Array.from(this.list_item_ref.current.children);
                const element_found = child_array.find(e =>
                    e.classList.contains("test") && 
                    e.classList.contains("highlight")
                );
                element_found && element_found.scrollIntoView();
             } else if (event.keyCode === 40) {
                 this.setState({item_selection: 
                 (this.state.dropdown_values_selection + 1) % 
                 this.state.dropdown_values.length});
                 let child_array = 
                 Array.from(this.list_item_ref.current.children);
                 const element_found = child_array.find(e =>
                     e.classList.contains("test") && 
                     e.classList.contains("highlight")
                 );
                 element_found && element_found.scrollIntoView();
             }

             if (event.keyCode === 13) {
                 event.preventDefault();
                 const selected_item = 
                 this.state.dropdown_values[this.state.user_selection];
                 const text = this.replace(this.state.input_val, 
                 selected_item);
                 this.setState({
                    input_val: text,
                    dropdown_values: [],
                 });
             }
        }

        replace = (input_val, selected_item) => {
            //some function to replace value in input field with the 
           //selected dropdown item
        }

        render = () => {
            return (
                <input 
                    onChange={this.handle_input_change}
                    onKeyDown={this.handle_key_down}/>
                <div ref={this.list_item_ref}>
                    {this.state.dropdown_values.map((item, index) => (
                        <div key={index} className={"test" + (index === 
                        this.state.item_selection ? ' highlight' 
                        : '')}>
                            {item.name}
                        </div>
                    ))}
                </div>
            )
        };
    }
}