Question

是React的新功能，正尝试使 NavItem 可点击以显示弹出窗口，这在实现中被称为Modal。我阅读了有关实现文档的信息，但它似乎不起作用，下面是指向：

的链接

这是当前具有的代码：

    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的方法。我应该采取什么步骤？

Answer 1

所以有几种方法可以做到这一点。这是没有触发的。您忘记了给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>

单击NavItem以在React / Materilize中显示一个弹出窗口/模块

1 个答案: