Javascript 如何使用reactjs使用scrollintoview方法将列表项滚动到视图中？

我想使用使用reactjs的scrollIntoView方法将列表项移动到视图中

我想做什么？ 我在变量some_arr中存储了一个对象数组，并在下拉菜单中显示这些值。当用户按下向下键时，下拉项将突出显示。还可以使用向上箭头键在下拉菜单中向上导航。 单击enter键将选择下拉项并替换输入字段中的值

我已经实现了下面的代码，效果很好。但当用户按下向下箭头键，突出显示的下拉菜单不在视图中时，我希望它对用户可见

为了实现这一点，我对下拉项使用了ref（this.dropdown\u item\u ref）。但是，此参考始终指向下拉菜单中的最后一项。意思是认为我有

some_arr = [
   {
       id:1,
       name: somename,
    },

    {
        id: 2,
        name: fname,
    },
    {
        id: 3,
        name: lname, //ref is always pointing to this item
    },
],

所以这里ref总是指向下拉菜单中的lname

以下是我尝试过但不起作用的内容

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

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

                {
                    id: 2,
                    name: fname,
                },
                {
                    id: 3,
                    name: lname, //ref is always pointing to this item
                },
            ],
        this.setState({dropdown_values: values});
    }

    handle_key_down = (event) => {
        if (this.state.dropdown_values > 0) {
            if (event.keyCode === 38 && this.state.dropdown_item_selection 
            > 0) {
                this.setState({dropdown_item_selection: 
                (this.state.dropdown_item_selection - 1) % 
                this.state.dropdown_values.length});
                this.list_item_ref.current.scrollIntoView();
            } else if (event.keyCode === 40) {
                this.setState({dropdown_item_selection: 
                (this.state.dropdown_values_selection + 1) % 
                this.state.dropdown_values.length});
                this.list_item_ref.current.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>
                    {this.state.dropdown_values.map((item, index) => (
                        <div key={index} className={"item" + (index === 
                        this.state.dropdown_item_selection ? ' highlight' 
                        : '')}>
                            {item.name}
                        </div>
                    ))}
                </div>
            )
        };
    }
}

class Dropdownwithinput扩展，PureComponent{
建造师（道具）{
超级（道具）；
this.list_item_ref=React.createRef（）；
此.state={
输入值：“”，
下拉菜单_值：[]，
下拉菜单项选择：0，
};
}
componentDidMount=（）=>{
常量值=[
{
id:1，
姓名：某某，
},
{
id:2，
姓名:fname,，
},
{
id:3，
name:lname，//ref始终指向此项
},
],
this.setState（{dropdown_values:values}）；
}
handle_key_down=（事件）=>{
如果（this.state.dropdown_值>0）{
如果（event.keyCode==38&&this.state.dropdown\u项目\u选择
> 0) {
此.setState（{下拉菜单\项目\选择：
（this.state.dropdown_item_selection-1）%
this.state.dropdown_values.length}）；
此.list_item_ref.current.scrollIntoView（）；
}else if（event.keyCode===40）{
此.setState（{下拉菜单\项目\选择：
（this.state.dropdown_值_选择+1）%
this.state.dropdown_values.length}）；
此.list_item_ref.current.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}
))}
)
};
}
}

---

有人能帮我修一下吗。谢谢。

我对您的代码做了一些修改：

import React from "react";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
    const dropdownValues = Array.from({ length: 100 }, (_, k) => k).reduce(
      (acc, curr) => {
        return acc.concat([{ id: curr, name: `${curr}.so` }]);
      },
      []
    );
    this.state = {
      input_val: "",
      dropdownValues,
      selectedItem: 0
    };
    this.listRefs = dropdownValues.reduce((acc, current, index) => {
      acc[index] = React.createRef();

      return acc;
    }, {});
  }

  componentDidMount() {
    window.addEventListener("keydown", this.handleKeyDown);
  }

  componentWillUnmount() {
    window.removeEventListener("keydown", this.handleKeyDown);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.selectedItem !== this.state.selectedItem) {
      this.listRefs[this.state.selectedItem].current.scrollIntoView();
    }
  }

  handleKeyDown = event => {
    const keyCodes = {
      up: 38,
      down: 40
    };

    if (![38, 40].includes(event.keyCode)) {
      return;
    }

    this.setState(prevState => {
      const { dropdownValues, selectedItem } = prevState;
      let nextSelectedItem;

      if (keyCodes.up === event.keyCode) {
        nextSelectedItem =
          dropdownValues.length - 1 === selectedItem ? 0 : selectedItem + 1;
      }

      nextSelectedItem =
        selectedItem === 0 ? dropdownValues.length - 1 : selectedItem - 1;

      return { ...prevState, selectedItem: nextSelectedItem };
    });
  };

  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}
        />
        <button
          type="button"
          onClick={() => this.setState({ selectedItem: 50 })}
        >
          Focus element 50
        </button>
        <div ref={this.listRef}>
          {this.state.dropdownValues.map((item, index) => (
            <div key={index} ref={this.listRefs[index]}>
              <div
                style={
                  this.state.selectedItem === index
                    ? { background: "yellow" }
                    : {}
                }
              >
                {item.name}
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }
}

export default Example;

从“React”导入React；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.listRef=React.createRef（）；
const-dropdownValues=Array.from（{length:100}，（u，k）=>k）.reduce(
（会计科目，当前）=>{
返回acc.concat（[{id:curr，name:`${curr}.so`}]）；
},
[]
);
此.state={
输入值：“”，
下拉值，
selectedItem:0
};
this.listRefs=dropdownValues.reduce（（acc、current、index）=>{
acc[index]=React.createRef（）；
返回acc；
}, {});
}
componentDidMount（）{
window.addEventListener（“keydown”，this.handleKeyDown）；
}
组件将卸载（）{
window.removeEventListener（“keydown”，this.handleKeyDown）；
}
componentDidUpdate（prevProps、prevState）{
如果（prevState.selectedItem！==此.state.selectedItem）{
this.listRefs[this.state.selectedItem].current.scrollIntoView（）；
}
}
handleKeyDown=事件=>{
常量键码={
上升：38，
下降：40
};
如果（！[38,40]。包括（event.keyCode））{
返回；
}
this.setState（prevState=>{
const{dropdownValues，selectedItem}=prevState；
让我们下一步选择它们；
if（keyCodes.up==event.keyCode）{
下一个选择项=
dropdownValues.length-1==selectedItem？0:selectedItem+1；
}
下一个选择项=
selectedItem==0？dropdownValues.length-1:selectedItem-1；
返回{…prevState，selectedItem:nextSelectedItem}；
});
};
替换=（输入值，所选项目）=>{
//某些函数将输入字段中的值替换为
//所选下拉项
};
render（）{
返回(
this.setState（{selectedItem:50}）}
>
焦点要素50
{this.state.dropdownValues.map（（项，索引）=>(
{item.name}
))}
);
}
}
导出默认示例；

您需要创建尽可能多的ref值。下面是一个使用计时器的完整示例，谢谢，我如何对代码执行同样的操作。我不想使用usestate。