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

【问题标题】：NavDropdown Tab not set to active when Dropdown Item link is active (react-bootstrap)当下拉项目链接处于活动状态时，NavDropdown 选项卡未设置为活动状态（react-bootstrap）
【发布时间】：2021-06-06 12:34:48
【问题描述】：

我对 Typescript 还是很陌生，而且很遗憾，我不明白我做错了什么。我有一个带有 NavDropdown 的标签样式导航。 Unfortunately the dropdown is the only tab that does not get the active class when one of the dropdown items is selected. 我已经看到有些人遇到了这个问题并且可以以某种方式解决它，但在我的情况下我找不到解决方法。谁能帮帮我？

目前我的导航是这样的：

  <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>

【问题讨论】：

要在点击时选择添加eventKey 到NavDropdown.Item。但是为了使其可以通过状态更改进行选择，它还需要 active 属性（例如，更改为当前月份）。请看下面Codesandbox。
@ yolf感谢代码箱的很多，它帮助了我已经有点:-)问题是，即使在你的例子中也没有在选择一个月时显示该月的选项卡。 .. :( 这就是我想要做的，或者它应该看起来如何：prnt.sc/14dlm4n 不幸的是我无法让它在 react-bootstrap 中工作......你能帮我解决这个问题吗？跨度>
您可以在NavDropDown 上添加title。我已经在 Codesandbox 中更改了它。如果不需要其他格式，也可以直接使用{month}作为标题。
对不起，我认为我不擅长准确描述我的问题。我能够将标题设置为当前月份。 My problem is that the tab with the current month is not displayed as an active tab when a month is selected.所以这就是当前选择一个月时的样子：prnt.sc/14dq5ce 但这是选择一个月后的样子：prnt.sc/14dlm4n 或者您是否已经知道我的意思，我只是不明白您的意思回答？ ://
好的，没问题。现在，我遇到了问题。使用activeTab 状态变量在NavDropdown 上设置active 属性。我已经更新了沙箱中的代码。所以month的选项卡每个月被激活一次。

标签： reactjs react-bootstrap react-bootstrap-nav

【解决方案1】：

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

将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/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

  
<div id="root"/>

【讨论】：