javascript - 単一の参照は、参照の配列、反応でフォーカスを設定できません

Question

環境

• ここではキーボードのみを使用し、マウス クリックは使用しません。
• 10 行のテーブルがある画像。
• 各行にはメニュー ボタンがあります。
• 4項目のドロップダウンメニューがポップアップするタブ。(フォーカス ポイントはメニュー ボタンにあります)
• 下矢印を押すと、フォーカス ポイントがドロップダウン メニューの最初の項目にあるはずです(これは私のコードでは機能しません)。

コード

import React, { useState, useEffect, useRef, createRef } from "react";

const MyDropdown = ({ items, rowKey, disabled }) => {
  const listRefs = useRef([]);
  const [open, setOpen] = useState(false);
  const [uniqueKey, setUniqueKey] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(-1);

  // focus
  useEffect(() => {
    if (open && selectedIndex > -1) {
      // this not working?????????
      listRefs.current[selectedIndex].focus();
    }
  }, [open, selectedIndex]);

  const setActionMenuDefaultState = (
    event,
    isPreventDefault,
    open,
    rowKey,
    selectedIndex
  ) => {
    if (isPreventDefault) event.preventDefault();
    setOpen(open);
    setUniqueKey(rowKey);
    setSelectedIndex(selectedIndex);
  };

  return (
    <div id={"bla" + rowKey}>
      <MyMenuButton
        onKeyDown={event => {
          if ([ENTER_KEY, SPACE_KEY].includes(event.key)) {
            //test
            console.log("enter or space");
            setActionMenuDefaultState(event, true, !open, rowKey, -1);
          } else if ([ARROW_DOWN_KEY].includes(event.key)) {
            //test
            console.log("down key");
            event.preventDefault();

            // menu is open
            if (open) {
              // bound
              if (selectedIndex < items.length) {
                //test
                console.log("still set");
                setSelectedIndex(selectedIndex + 1);
              }
              // focus this row, 1st item
            }
          }
        }}
      />
      {!disabled && open && uniqueKey === rowKey ? (
        <MyDivWrapper>
          {items.map((item, index) => {
            return (
              <MyList
                ref={listRef => (listRefs.current[index] = listRef)}
                key={rowKey + index}
                onKeyDown={event => {
                  console.log("Able to focus and enter");
                }}
              >
                <p>Download</p>
              </MyList>
            );
          })}
        </MyDivWrapper>
      ) : null}
    </div>
  );
};

export default MyDropdown;

私の理解

• 私はこの例とこれを見ます
• 参照の配列const listRefs = useRef([]);
• マイリストはli
• ref={listRef => (listRefs.current[index] = listRef)}