javascript - 如何使用 reactjs 使用 scrollintoview 方法将列表项滚动到 View 中？

Question

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

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

我已经实现了下面的代码并且运行良好。但是当用户按下箭头键并且突出显示的下拉菜单不在 View 中时，我希望它对用户可见。

因此，为了实现，我对下拉项使用了 ref (this.dropdown_item_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>
            )
        };
    }
}

谁能帮我解决这个问题。谢谢。

Answer 1

我对你的代码做了一些调整:

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;