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>

Answer 1

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

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

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