javascript - 如何在 react 中使用向上和向下箭头键使下拉菜单工作

Question

我正在尝试使用 React 创建一个自定义下拉菜单，它也应该与键盘的上下键一起使用

这是我迄今为止尝试过的

import React, { useState, useEffect, useRef } from "react";
import "./dropdown.scss";

const Dropdown = ({ selected, setSelected }) => {
  const [open, setOpen] = useState(false);
  const options = ["Option1", "Option2", "Option3", "Option4"];
  const [cursor, setCurser] = useState(0);

  //   const label = ["frontend", "backend"];

  let menuRef = useRef();
  // let menuRef1 = useRef();

  useEffect(() => {
    let handler = (e) => {
      if (!menuRef.current.contains(e.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
    };
  });

 

  const handleKeyDown = (e) => {
    if (e.keyCode === 38 && cursor > 0) {
      setCurser({
        ...cursor,
        cursor: cursor + 1,
      });
      console.log(cursor);
    } else if (e.keyCode === 40 && cursor < options.length - 1) {
      setCurser({
        ...cursor,
        cursor: cursor - 1,
      });
    }
  };
  return (
    <div>
      <div className="dropdown">
        <div
          ref={menuRef}
          onKeyPress={handleKeyDown}
          className={
            open ? "dropdown-wrapper--up dropdown-wrapper " : "dropdown-wrapper"
          }
        >
          <div className="dropdown-container">
            <div
              className={"dropdown-header"}
              onClick={() => setOpen(!open)}
              // ref={menuRef1}
            >
              {!open ? (
                <div className={selected ? "title-active " : "dropdown-title"}>
                  {selected ? selected : "dropdown-select"}
                </div>
              ) : (
                <div className={selected ? "active-color " : "dropdown-title"}>
                  {selected ? selected : "dropdown-select"}
                </div>
              )}
              <i
                className={open ? "fas fa-chevron-up" : "fas fa-chevron-down"}
              ></i>
            </div>
            {open ? (
              <div
                className={selected ? "active-label active-label--up" : "label"}
              >
                {open ? "Hint Text" : "Title"}{" "}
              </div>
            ) : (
              <div className={selected ? "active-label " : "label "}>
                {open ? "Hint Text" : "Title"}{" "}
              </div>
            )}
          </div>
          {open && (
            <ul className="list">
              {options.map((option, i) => (
                <li
                  onClick={() => {
                    setSelected(option);
                    setOpen(false);
                  }}
                  className="list-item"
                  tabIndex="0"
                >
                  {option}
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default Dropdown;

这是输出

我想使用向上和向下箭头键在选项之间移动...尝试了很多解决方案但不起作用

我使用数组作为选项列表并通过它进行映射并显示在下拉列表中。 一切工作正常，但只是不知道如何将键盘按键映射到选项列表

Answer 1

您可以为每个选项创建一个引用数组

const optionRefs = useRef(options.map(() => createRef()));

然后使用这些引用

options.map((option, index) => (<li ... ref={optionRefs.current[index]} >...</li>)

然后在导航时将焦点更改为引用... 就像将第一个焦点放在向下箭头上一样:

optionRefs.current[0].current?.focus();