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>.
<Nav> <NavDropdown eventKey={2} title="About" id="basic-nav-dropdown"> <MenuItem eventKey={2.1} href="#bio">Biography</MenuItem> <MenuItem divider /> <MenuItem eventKey={2.2} href="#edu">Education</MenuItem> <MenuItem eventKey={2.3} href="#employ">Employment</MenuItem> <MenuItem eventKey={2.4} href="#honor">Honors</MenuItem> <MenuItem eventKey={2.5} href="#award">Academic Awards</MenuItem> </NavDropdown> </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>
    );
  }
}