Not triggered in some react-bootstrap components

[johnhorsema]

I am using this with react-bootstrap components. I have imported smoothscroll with import Scroll from 'smoothscroll' in the render() method.

All dropdown items do not work, except those in <Nav pullRight>. `

Biography Education Employment Honors Academic Awards

        </Nav>
        <Nav pullRight>
          <NavItem eventKey={1} href="#research">
            <i className="glyphicon glyphicon-book"></i> Research
          </NavItem>
          <NavItem eventKey={2} href="#service">
            <i className="glyphicon glyphicon-briefcase"></i> Service
          </NavItem>
          <NavItem eventKey={3} href="#contact">
            <i className="glyphicon glyphicon-earphone"></i> Contact
          </NavItem>
        </Nav>`

[superhussain]

React doesn't play well with hash links. What you could do is create a function to manually do the scroll.

It could look something like this:

import React from "react";
import smoothScroll from 'smoothscroll';

export default class Nav extends React.Component {
  handleScrollClick(event) {
    var scrollId = this.props.data.href;
    var scrollElement = document.querySelector(scrollId);
    smoothScroll(scrollElement);

    event.preventDefault();
  }

  render() {
    return (
      <Nav>
        <NavDropdown>
          <MenuItem eventKey={2.1} href="#bio" onClick={this.handleScrollClick.bind(this)}>...</MenuItem>
          ...
        </NavDropdown>
      </Nav>
    );
  }
}