Нажмите NavItem, чтобы показать всплывающее окно / модальное в React / Materilize - PullRequest
Новая
       6

Нажмите NavItem, чтобы показать всплывающее окно / модальное в React / Materilize

0 голосов
/ 11 октября 2018

Я новичок в React и пытаюсь сделать NavItem кликабельным, чтобы показать Всплывающее окно , которое известно как Модал в материализации.Я читал о материализации документации, но она, похоже, не работает, ниже приведена ссылка на:

NavBar

Модальные

Этот код в настоящее время имеет: 

    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;

Я ищу способ встроить модальное устройство в NavItem.какие шаги я должен предпринять?

1 Ответ

0 голосов
/ 11 октября 2018

Так что есть несколько способов сделать это.Этот без триггера.Вы забыли отдать и 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>
...