При открытии раскрывающегося списка React.-bootstrap Navbar я хочу предотвратить прокрутку тела - PullRequest
Новая
       54

При открытии раскрывающегося списка React.-bootstrap Navbar я хочу предотвратить прокрутку тела

1 голос
/ 08 апреля 2019

Я использую Навбар и Нав из реакции-начальной загрузки.Когда я нажимаю на гамбургер, я хочу предотвратить прокрутку тела при открытии раскрывающегося списка.

Я пытался использовать body-scroll-lock, но мне сложно определить, какой элемент установить как targetElement и гдевызовите функции showtargetElement и hideTargetElement в компоненте Navbar.

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';


class Header extends Component {
  targetElement = null;

  componentDidMount() {
    this.targetElement = document.querySelector('.menu');
  }

  showTargetElement = () => {
    if('.menu') {
      disableBodyScroll(this.targetElement);
    }
  }

  hideTargetElement = () => {
    enableBodyScroll(this.targetElement);
  }

  componentWillUnmount() {
    clearAllBodyScrollLocks();
  }

  render() {
    return (
      <div className="header">
        <Navbar className="my-navbar" variant="dark" expand="lg">
          <Navbar.Brand className="my-brand" href="#home">Karina Gaulin</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse
            className="dropdown"
            id="basic-navbar-nav"
          >
            <Nav className="mr-auto menu">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="https://www.resume.com/share/karinagaulin" download>Resume</Nav.Link>
              <Nav.Link href="mailto:karinagaulin@gmail.com">Connect</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
      );
    }
  }

  export default Header;
...