reactjs - 在 React 中使用 autoFocus 在侧边菜单的按钮之间切换焦点

我正在尝试在侧边菜单中的按钮之间切换焦点。被点击的按钮应该获得焦点。我的侧边菜单代码：

import React, { useRef } from "react";
import styles from "./SideMenu.module.scss";

interface Props {
  buttons: Array<any>;
  clicked: Function;
}

const sideMenu: React.FC<Props> = ({ buttons, clicked }) => {
  const buttonsList = buttons.map((b, index) => {
    return (
        <button 
            key={b.label} 
            id={b.label}
            autoFocus={b.isSelected}
            onClick={() => clicked(b.label)}>
            {b.label.toUpperCase()}
        </button>
    );
  });

  return <div className={styles.sideMenu}>{buttonsList}</div>;
};

export default sideMenu;

这是点击时改变按钮状态的代码

const layout: React.FC<{}> = ({ children }) => {
  const [buttons, setButtons] = useState([
    { label: "btn1", isSelected: true, routePath: "/btn1" },
    { label: "btn2", isSelected: false, routePath: "/btn2" },
  ]);

  const router = useRouter()

  const clickButtonHandler = (buttonLabel: string) => {
    const updatedButtons = [...buttons];
    let path = "/";
    updatedButtons.map((b, index) => {
      if (b.label === buttonLabel) {
        b.isSelected = true
        path = b.routePath
      } else {
        b.isSelected = false
      }
    });
    setButtons(updatedButtons)
    router.push(path)
  };

  return (
    <div className={styles.mainWrapper}>
      <h1 className={styles.mainHeader}>My Web App</h1>
      <div className={styles.wrapper}>
        <SideMenu buttons={buttons} clicked={clickButtonHandler} />
        <div className={styles.content}>{children}</div>
      </div>
    </div>
  );
};

export default layout;

当我渲染页面时，btn1 会被自动聚焦（这是预期行为），当我点击 btn2 时，焦点首先会变到 btn2，但随后会立即回到 btn1，如果我再次点击 btn2，焦点会变到 btn2 并保持在那里。

但是每次我点击 btn1，焦点都会切换到 btn1 并停留在那里。

如果我把“router.push(path)”注释掉，聚焦行为就能正常工作。

我如何在不注释掉“router.push(path)”的情况下让它工作？

答案＃1

autoFocus 在你的控件不放在 <form> 标签内之前无法正常工作。你可以渲染一个表单，但有一种方式更符合“React”的风格。

const sideMenu: React.FC<Props> = ({ buttons, clicked }) => {
  const focusedButton = null;

  useEffect(() => {
      if(focusedButton) focusedButton.focus();
  });

  const buttonsList = buttons.map((b, index) => {
    return (
        <button 
            key={b.label} 
            id={b.label}
            ref={el => {focusedButton = b.isSelected ? el : focusedButton}}
            onClick={() => clicked(b.label)}>
            {b.label.toUpperCase()}
        </button>
    );
  });

  return <div className={styles.sideMenu}>{buttonsList}</div>;
};

官方文档建议使用 ref 来聚焦元素。这里有关于 ref 回调的更多详细信息。