当下拉项链接处于活动状态时，NavDropdown 选项卡未设置为活动状态react-bootstrap

问题描述

我对打字稿和反应还很陌生，不幸的是我不明白我做错了什么。 我有一个带有 NavDropdown 的选项卡样式导航。 不幸的是，下拉列表是唯一一个在选择下拉项目之一时没有获得活动类的选项卡。 我已经看到有些人遇到了这个问题并且可以以某种方式解决它，但在我的情况下我找不到解决方法。 有人可以帮我吗？

目前我的导航看起来像这样：

  <Nav variant="tabs">
    <Nav.Item>
      <Nav.Link
        onClick={(e: React.MouseEvent<Element,MouseEvent>) => setTab(e,"today")}
        href="#today"
      >
        today
      </Nav.Link>
    </Nav.Item>

    <NavDropdown
      title={activeTab === "month" ? dateFormat(dateStart!,"MMMM yyyy") : "month"}
      id="month"
    >

      {months.map((m) => (
        <NavDropdown.Item onClick={() => setMonth(m)} key={dateFormat(m,"MMMM yyyy")}>
          {dateFormat(m,"MMMM yyyy")}
        </NavDropdown.Item>
      ))}
    </NavDropdown>

解决方法

我修改了以下部分以修复标签导航和月份选择：

• 将 defaultActiveKey={activeTab} 添加到 Nav 组件以在加载时激活标签
• Nav.Link 添加了 eventKey="today" 以正确设置今天标签的密钥
• 在 NavDropdown.Item 上添加了 active={m === month}，其中 m 是地图的迭代器（例如 2021 年 1 月、2021 年 2 月等），月份是所选月份。这是必需的，以便下拉列表中的选择起作用。
• 在下拉项的 onClick 中添加了 setMonth 和 setTab 以更新状态。
• 在 NavDropdown 添加了 active={activeTab === "month"}，以便标签导航正确更新。

我还使用 moment.js 生成月份数组并格式化月份。数组的生成来自this SO answer。

您可以查看下面或此 Codesandbox 中的代码。

/*import moment from "moment";
import { useState } from "react";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";*/

const {useState} = React;
const {Nav,NavDropdown} = ReactBootstrap;
const MONTH_FORMAT_STR = "MMM yyyy";
const months = Array.apply(0,Array(12)).map(function (_,i) {
  return moment().month(i).format(MONTH_FORMAT_STR);
});

const curMonth = moment().format(MONTH_FORMAT_STR);

function App() {
  const [month,setMonth] = useState(curMonth);
  const [activeTab,setTab] = useState(`month`);
  const [dateStart,setStart] = useState(""); // not implemented yet

  return (
    <Nav variant="tabs" defaultActiveKey={activeTab}>
      <Nav.Item>
        <Nav.Link
          eventKey="today"
          onClick={() => {
            setTab("today");
            console.log("set month",curMonth);
            setMonth(curMonth);
          }}
          href="#today"
        >
          today
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <NavDropdown
          id="month"
          active={activeTab === "month"}
          title={moment().month(month).format("MMMM YYYY")}
        >
          {months.map((m) => (
            <NavDropdown.Item
              title={m}
              eventKey={m}
              active={m === month}
              onClick={() => {
                setMonth(m);
                setTab("month");
              }}
              key={m}
            >
              {m}
            </NavDropdown.Item>
          ))}
        </NavDropdown>
      </Nav.Item>
      {activeTab} {month}
    </Nav>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/1.5.2/react-bootstrap.min.js" integrity="sha512-Mw0NWa5M4d73pjqO5CY7Olq0yjPg80GsKCRHpy114idMaX8v+scJmRvhWbXTct8inkKGJNzBvMyWG4ok79zigQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

  
<div id="root"/>