1

我对 Typescript 还是很陌生，并且做出反应，不幸的是不明白我做错了什么。我有一个带有 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>
4

1 回答 1

0

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

  • 添加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来生成月份数组并格式化月份。数组的生成来自这个 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"/>

于 2021-06-06T19:21:25.417 回答