如何在React中设置默认点击的按钮

Question

我正在开发一个 ToDo 应用程序，我设法制作了一个菜单部分，其中有两个按钮在应用程序部分之间切换。问题是，当它第一次打开时，默认情况下应该单击“关于我”按钮，因为这是路由器中的默认路径。但我无法让它默认点击，我尝试了不同的方法但没有任何作用。当我打开应用程序时，两个按钮都没有被单击。有人可以帮我解决这个问题吗？

这是代码：

const App = () => {
  const buttons = ["Дела", "Обо мне"];
  const [clicked, setClicked] = useState();

  return (
    <Router>
      <div>
        <nav className={styles.menu}>
          <ul className={styles.nav}>
            {buttons.map((item, index) => {
              return (
                <li
                  key={index}
                  onClick={() => {
                    if (clicked === index) {
                      setClicked();
                    }
                    if (!clicked) {
                      setClicked(this.index);
                    } else {
                      setClicked(index);
                    }
                  }}
                >
                  <NavLink to={`/buttons/${index}`}>
                    {
                      <button
                        className={classnames({
                          [styles.button]: true,
                          [styles.selected]: clicked === index
                        })}
                      >
                        {item}
                      </button>
                    }
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </nav>
        <Routes>
          <Route path="buttons" element={<App buttons={buttons} />} />
          <Route path="/" element={<About />} />
          <Route path=":button/0" element={<Todo />} />
          <Route path=":button/1" element={<About />} />
          <Route />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

我尝试以某种方式在 useState 中存储默认的单击值以使其工作，但没有帮助。可能我误解了什么并且做错了。

Answer 1

useState

接受具有您想要的初始状态的参数。

如果我理解正确，

clicked

存储单击的按钮的索引。因此，您可以给它

0

以使第一个按钮在单击时启动，或

1

使第二个按钮在单击时启动：

const [clicked, setClicked] = useState(1);