时间戳

首页 > 解决方案 > 单击 NavItem 以在 React/Materilize 中显示弹出窗口/模态框

javascript - 单击 NavItem 以在 React/Materilize 中显示弹出窗口/模态框

问题描述

我是 React 的新手，正在尝试使NavItem可单击以显示一个弹出窗口，该弹出窗口在物化中被称为模态。我阅读了有关物化文档的信息，但它似乎不起作用，下面是链接：

导航栏

模态

这是我目前拥有的代码：

    class NavBar extends Component {

    render() {
        return (
            <div>
                <Navbar  className='white' brand={brandColor} right>
                    <NavItem className='text-navbar' > Sign Up</NavItem>
                    <NavItem onClick={() => <Modal/>}>Getting started</NavItem>

                </Navbar>

                <Modal
                    className={"modal"}
                    header='Modal Header'
                    fixedFooter
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum
                </Modal>



           </div>
        );
    }
}

export default NavBar;

我正在寻找一种将 Modal 嵌入到 NavItem 的方法。我应该采取什么步骤？

标签： javascriptreactjsmaterialize

解决方案

所以有几种方法可以做到这一点。这个是没有触发的。你忘了给Id模态和调用它nav item

<Navbar  className='white' brand={brandColor} right>
    <NavItem className='text-navbar' > Sign Up</NavItem>
    <NavItem 
        onClick={() => {
            $('#myModal').modal('open')
        }}>
        Getting started
   </NavItem>
</Navbar>

<Modal
      id="myModal"
      className={"modal"}
      header='Modal Header'
      fixedFooter>

      Text goes here
</Modal>

推荐阅读