当下拉项 link 处于活动状态时，NavDropdown 选项卡未设置为活动状态（反应-bootstrap）

Question

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

目前我的导航是这样的：

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

Answer 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 to generate the month array and to format the months. Generation of the array is from 。

您可以查看下面的代码或此 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"/>

当下拉项 link 处于活动状态时，NavDropdown 选项卡未设置为活动状态（反应-bootstrap）

NavDropdown Tab not set to active when Dropdown Item link is active (react-bootstrap)

reactjs

react-bootstrap

react-bootstrap-nav