javascript - onClick 事件使用 react-bootstrap nav 下拉菜单和 react-router-dom 不起作用

Question

我使用 react-bootstrap 有以下导航栏。第二个品牌始终是处于活动状态的品牌，就好像下拉菜单始终单击链中的最后一项（在本例中为 Tommy Hilfiger）。我需要根据单击下拉列表中的哪个项目来设置品牌。

const [brand, setBrand] = useState("");

 const brandSet = (value) => {
    setBrand(value);
  };

<Navbar bg="light" expand="lg">
          
              <NavDropdown title="Brands" id="basic-nav-dropdown">
                <NavDropdown.Item href="/#/products">
                  All Products
                </NavDropdown.Item>
                <NavDropdown.Item
                  href="/#/products:PoloRalphLauren"
                  onClick={brandSet("Polo Ralph Lauren")}
                >
                  Polo Ralph Lauren
                </NavDropdown.Item>
                <NavDropdown.Item
                  href="/#/products:TommyHilfiger"
                  onClick={brandSet("Tommy Hilfiger")}
                >
                  Tommy Hilfiger
                </NavDropdown.Item>

标签： javascriptreactjsbootstrap-4react-hooksreact-bootstrap

Answer 1

因为您正在调用该函数而不是将函数传递给 onClick，所以将该行更改为：

        <NavDropdown.Item
             href="/#/products:PoloRalphLauren"
             onClick={() => brandSet("Polo Ralph Lauren")}
         >
            Polo Ralph Lauren
        </NavDropdown.Item>

=> 称为箭头函数，在 ES6 中引入，将在 React 0.13.3 或更高版本上得到支持。