reactjs 在React中，点击不同功能组件的按钮时如何打开下拉菜单

isr3a4wc 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(186)

我想做喜欢当点击这个加入按钮，想显示用户注册表下拉从导航栏组件。我不知道如何做到这一点，有人能帮助吗？

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>

reactjs

来源：https://stackoverflow.com/questions/74860934/in-react-how-open-the-dropdown-when-click-a-button-from-different-function-compo

1条答案

按热度按时间

dxxyhpgq1#

很简单，你可以这样做：

注意：您可以在现有的下拉列表中实现此逻辑。
第一部分：

export default function First (){
       const [show, setShow] = useState(true);
       const handleShow = () => setShow(!show);

      return (
      <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <hr />
      <Second show={show} />
      <button type="button" onClick={handleShow}>
        Toggle the Component
      </button>
    </div>
  );
    }

第二个组件内部

export default function SecondComponent ({show,handleHide}){
     return (
       <div hidden={show}>
          <div>Hey! I'm here....</div>
       </div>
      );
    }

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 在React中，点击不同功能组件的按钮时如何打开下拉菜单

1条答案

相关问题

热门标签

最新问答