React中如何点击独立组件按钮打开导航栏下拉菜单

需求：点击页面中的「立即加入」按钮时，展示导航栏组件（ColorNavbar）内的用户注册表单下拉菜单。

现有实现代码：

父组件代码 #

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

<ColorNavbar isMenuOpen={isMenuOpen} />

<Button
        id="loyaltyButton"
        className="text-center btn btn-lg btn-round mt-3 text-capitalize"
        onClick={() => {
          setIsMenuOpen(true);
        }}
      >
        Join Now
      </Button>

ColorNavbar.js代码 #

<UncontrolledDropdown nav inNavbar>
            <DropdownToggle className="mr-2 iconN" tag={Link}>
              <img
                className="megan-text pb-1"
                src={require("assets/img/Page/Navbar/user3.png")}
                alt="shoppingbag"
                width="15"
                height="20"
              />
              <img
                className="megan-text img-hover"
                src={require("assets/img/Page/Navbar/user1.png")}
                alt="shoppingbag"
                width="15"
                height="20"
              />
            </DropdownToggle>
            <DropdownMenu
              className="dropdown w-25 "
              right
              id="nav-float-right"
              isOpen={isMenuOpen}
            >
              <UserComponent />
            </DropdownMenu>
          </UncontrolledDropdown>

问题原因 #

你使用的UncontrolledDropdown组件会自行管理下拉菜单的展开/收起状态，外部传入的isOpen属性无法覆盖它的内部状态，因此父组件通过setIsMenuOpen(true)修改的状态无法传递到下拉菜单中生效。

解决方案 #

将UncontrolledDropdown替换为受控的Dropdown组件，手动关联外部状态来控制下拉菜单的显示：

1. 修改父组件，添加菜单关闭回调

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

// 下拉菜单关闭时同步父组件状态
const handleMenuClose = () => {
  setIsMenuOpen(false);
};

<ColorNavbar isMenuOpen={isMenuOpen} onMenuClose={handleMenuClose} />

<Button
  id="loyaltyButton"
  className="text-center btn btn-lg btn-round mt-3 text-capitalize"
  onClick={() => {
    setIsMenuOpen(true);
  }}
>
  Join Now
</Button>

2. 修改ColorNavbar组件，使用受控Dropdown

import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';

const ColorNavbar = ({ isMenuOpen, onMenuClose }) => {
  // 自定义切换逻辑，结合外部状态
  const toggle = () => {
    isMenuOpen ? onMenuClose() : null;
  };

  return (
    <Dropdown nav inNavbar isOpen={isMenuOpen} toggle={toggle}>
      <DropdownToggle className="mr-2 iconN" tag={Link} onClick={toggle}>
        <img
          className="megan-text pb-1"
          src={require("assets/img/Page/Navbar/user3.png")}
          alt="shoppingbag"
          width="15"
          height="20"
        />
        <img
          className="megan-text img-hover"
          src={require("assets/img/Page/Navbar/user1.png")}
          alt="shoppingbag"
          width="15"
          height="20"
        />
      </DropdownToggle>
      <DropdownMenu
        className="dropdown w-25 "
        right
        id="nav-float-right"
      >
        <UserComponent />
      </DropdownMenu>
    </Dropdown>
  );
};

关键修改说明 #

• 替换UncontrolledDropdown为Dropdown：受控组件允许外部通过isOpen和toggle方法完全控制状态。
• 传递onMenuClose回调：当下拉菜单因点击页面其他区域而关闭时，同步更新父组件的isMenuOpen状态，避免状态不一致。
• 关联toggle方法：保留导航栏用户图标的点击切换功能，确保原有交互逻辑正常。

内容的提问来源于stack exchange，提问作者Lucky